SOLVED (mostly): Another ReactJS Question

JavaScript
1

Currently working on the Front-end libraries project and I’ve run across a sort of problem I need some help with. See I’m writing/running my code on codepen and there’s this particular snippet of code that seems to get modified automatically:

This is what I type in:

   <div id="editor-toolbar" style={etoolbar} className="toolbar">                       <p 
  className="title">Editor</p>
          <div className="toolbar-actions">
              <button className="toolbar-min-max">
                <i className="far fa-window-maximize"></i>
              </button>
              <button className="toolbar-min-max">
                <i className="fas fa-window-maximize"></i>
              </button>
            </div>
          </div>

But this is what I see on my devTools. Notice the additional span element.

<div id="editor-toolbar" style="background:#eddcd2;flex:1;border-top-left-radius:2%;border-top-right-radius:2%;" class="toolbar" data-reactid=".0.0.0.0">
<span data-reactid=".0.0.0.0.0"></span>
<p class="title" data-reactid=".0.0.0.0.1">Editor</p>
<div class="toolbar-actions" data-reactid=".0.0.0.0.2">
<button class="toolbar-min-max" data-reactid=".0.0.0.0.2.0">
<i class="far fa-window-maximize" data-reactid=".0.0.0.0.2.0.0" aria-hidden="true"></i>
</button>
<button class="toolbar-min-max" data-reactid=".0.0.0.0.2.1">
<i class="fas fa-window-maximize" data-reactid=".0.0.0.0.2.1.0" aria-hidden="true"></i>
</button>
</div>
</div>

Now normally, this probably wouldn’t bother me, but since I’m styling my toolbar div with flexbox, then the extra span element also counts as a flex item when applying the ‘justify-content’ property.

Any help will be appreciated.

2

Hello!

I don’t know why it’s adding a new span, but to “remove it” you could:

#editor-toolbar > span { display: none; }

If you share your code we could guess what is adding that extra element :slight_smile:.

1 Like
3

Haha. Thanks. Seems I’ve been too tunnel visioned lately. I’d actually forgotten I could use CSS to fix certain kinds of issues. Anyways, here is the rest of my code. Sorry in advance for the poor indentation if any. I’m still getting the hang of this forum.

I’ve looked around and it seems like something react does automatically. I’d be grateful if you could help me understand why. Most explanations I’m getting are unclear.

class App extends React.Component {
  constructor(props){
    super(props);
  }
  
  render(){
    return (
      <div className="app">
        <Editor />
        <Previewer />
      </div>
    );
  }
}
class Editor extends React.Component {
  constructor(props){
    super(props);
  }
  
  render(){
    let editAreaStyle = {
      height: "50vh",
      display: "flex",
      justifyContent: "center",
      paddingBottom: "1em"
    };
    
    let myEditorStyles = {
      width: "60%",
      height: "100%",
      display: "flex",
      flexDirection: "column",
      borderRadius: "2%",
      boxShadow: "3px 3px 10px 1px rgba(0,0,0,0.51);"
    };
    
    let etoolbar = {
      background: "#eddcd2",
      flex: "1",
      borderTopLeftRadius: "2%",
      borderTopRightRadius: "2%"
    };
    
    let editor = {
      background: "#fff1e6",
      // width: "90%",
      flex: "9",
      // height: "90%",
      borderBottomLeftRadius: "2%",
      borderBottomRightRadius: "2%",
      border: "none"
    }
    
    return (
      <div id="edit-area" style={editAreaStyle}>
        <div id="myeditor" style={myEditorStyles}>
          <div id="editor-toolbar" style={etoolbar} className="toolbar">                       <p className="title">Editor</p>
          <div className="toolbar-actions">
              <button className="toolbar-min-max">
                <i className="far fa-window-maximize"></i>
              </button>
              <button className="toolbar-min-max">
                <i className="fas fa-window-maximize"></i>
              </button>
            </div>
          </div>
          <textarea id="editor" style={editor} className="text-editor"></textarea>
        </div>
      </div>
    );
  }
}

class Previewer extends React.Component {
  constructor(props){
    super(props);
  }
  
  render(){
    let previewAreaStyle = {
      minHeight: "70%",
      display: "flex",
      justifyContent: "center"
    };
    
    
    let mypreview = {
      width: "80%",
      display: "flex",
      flexDirection: "column",
      border: "none",
      minHeight: "30em",
      borderRadius: "2%",
      boxShadow: "3px 3px 10px 1px rgba(0,0,0,0.51);"
    }
    
    let ptoolbar = {
      background: "#eddcd2",
      borderTopLeftRadius: "2%",
      borderTopRightRadius: "2%",
      flex: ""
    };
    
    let preview = {
      background: "#fff1e6",
      flex: "9"
    }
    
    return (
      <div id="preview-area" style={previewAreaStyle}>
        <div id="mypreviewer" style={mypreview}>
          <div id="preview-toolbar" style={ptoolbar} className="toolbar">             
            <p className="title">Preview</p>
            <div className="toolbar-actions">
              <button className="toolbar-min-max">
                <i className="far fa-window-maximize"></i>
              </button>
              <button className="toolbar-min-max">
                <i className="fas fa-window-maximize"></i>
              </button>
            </div>
          </div>
          <div id="preview" style={preview}>
            
          </div>
        </div>
      </div>
    );
    
  }
}


React.render(<App />, document.getElementById("content"));
4

Honestly, I’m not an expert with react, so I don’t know what happens. In fact, I tried to reproduce the behavior but the tag wasn’t added: https://repl.it/@skaparate/AntiqueAnxiousIntranet#src/App.js

However, you should not use ; inside styles:

let mypreview = {
      width: "80%",
      display: "flex",
      flexDirection: "column",
      border: "none",
      minHeight: "30em",
      borderRadius: "2%",
     // Next line:
      boxShadow: "3px 3px 10px 1px rgba(0,0,0,0.51);"
    }

Also, I don’t think your app should be working if you’re using React.render instead of ReactDOM.render, unless you aliased the latter as React (though it would cause other problems too).

1 Like
5

Don’t know how I missed that semicolon. Thanks for the observation.
As for the ReactDOM.render vs React.render, I too found it strange. Whenever I added the JS libraries needed for my React projects on codepen, I’d always need 2 so I could use ReactDOM.render. I found the React.render by looking at some other folks projects. Also don’t know what’s going on tbh.

Could be the reason why some things aren’t working as expected as I move forward. e.g. I’m currently having troubles with the dangerouslySetInnerHTML property.

Let me look into it.

Thanks for the help anyway.