title: How to update the state of a sibling component from another sibling or imported component in REACT
body: <p>Hi i just recently started learning ReactJS and been playing around the import and export functions, For example this is the structure of the app, 3 separate files the parent and 2 children; How do i export the state from InputArea to DisplayArea?</p>
  
  <p><strong>Parent Component</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import DisplayArea from './DisplayArea';
  import InputArea from './InputArea';
  
  class App extends Component {
    render() {
      return (
        &lt;div id="wrapper" className="App"&gt;
          &lt;DisplayArea /&gt;
          &lt;InputArea /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p><strong>Child 1 Component</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import InputArea from './InputArea';
  
  class DisplayArea extends Component {
    constructor(props){
      super(props);
    }
  
      render() {
        return (
          &lt;div className="column"&gt;
              &lt;div className="col-body"&gt;
                  &lt;div id="preview"&gt;{ How to display contents here? }&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
        );
      }
    }
  
  export default DisplayArea;  
  </code></pre>
  
  <p><strong>Child 2 Component</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  
  class InputArea extends Component {
      constructor(props){
        super(props);
        this.state = {
          content: ''
        }
        this.handleChange = this.handleChange.bind(this);
      }
  
      handleChange(e){
        e.preventDefault();
        this.setState({
          content: e.target.value
        })
      }
  
      render() {
        return (
          &lt;div className="column"&gt;
  
              &lt;div className="col-body"&gt;
                  &lt;textarea id="editor" placeholder="Enter text here" onChange={this.handleChange}&gt;&lt;/textarea&gt;
              &lt;/div&gt;
          &lt;/div&gt;
        );
      }
    }
  
  export default InputArea; 
  </code></pre>