title: Passing props from one component to another in ReactJS returns undefined
body: <p>I am a newbie in React and I am trying to pass props from one React component to another. Please consider my code below and tell me what could I possibly doing wrong.
  As you will notice, I am trying to do so with this.props.value, but all I got in the console is "undefined". I managed to run the code by putting all HTML elements in one component and it was working perfectly fine.</p>
  
  <pre><code>class Editor extends React.Component {
    constructor(props) {
      super(props);
  
      this.state = {
        input: defaultTxt
      };
      this.inputChanges = this.inputChanges.bind(this);
    }
  
    inputChanges(e) {
      this.setState({
        input: e.target.value
      });
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;div id="editorBar"&gt;
            Editor
            &lt;i className="fa fa-expand expand" /&gt;
          &lt;/div&gt;
          &lt;textarea
            id="editor"
            style={editorStyle}
            value={this.state.input}
            onChange={this.inputChanges}
            placeholder={defaultTxt}
          /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  //preview
  
  class Previewer extends React.Component {
    render() {
      return (
        &lt;div&gt;
          &lt;div id="previewerBar"&gt;
            Preview
            &lt;i className="fa fa-expand expand" /&gt;
          &lt;/div&gt;
          &lt;div
            id="preview"
            style={viewerStyle}
            dangerouslySetInnerHTML={{ __html: this.props.value }}
          /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  //wrapper
  
  class Wrapper extends React.Component {
    render() {
      return (
        &lt;div id="wrapper"&gt;
          &lt;Editor /&gt;
          &lt;Previewer /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  const defaultTxt = `Some default text`;
  
  ReactDOM.render(&lt;Wrapper /&gt;, document.getElementById('root'));
  </code></pre>