How to update the state of a sibling component from another sibling or imported component in REACT

Question

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?

Parent Component

import React, { Component } from 'react';
import DisplayArea from './DisplayArea';
import InputArea from './InputArea';

class App extends Component {
  render() {
    return (
      <div id="wrapper" className="App">
        <DisplayArea />
        <InputArea />
      </div>
    );
  }
}

export default App;

Child 1 Component

import React, { Component } from 'react';
import InputArea from './InputArea';

class DisplayArea extends Component {
  constructor(props){
    super(props);
  }

    render() {
      return (
        <div className="column">
            <div className="col-body">
                <div id="preview">{ How to display contents here? }</div>
            </div>
        </div>
      );
    }
  }

export default DisplayArea;  

Child 2 Component

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 (
        <div className="column">

            <div className="col-body">
                <textarea id="editor" placeholder="Enter text here" onChange={this.handleChange}></textarea>
            </div>
        </div>
      );
    }
  }

export default InputArea; 

Answer 1

The React.js documentation says (Lifting State Up):

Often, several components need to reflect the same changing data. We recommend lifting the shared state up to their closest common ancestor...

Example:

// Parent component which contains shared state
class Parent extends Component {
  constructor(props) {
    super(props);

    this.state = {
      child1Value: 0,
      child2Value: 0,
    }

    this.handleChild1Click = this.handleChild1Click.bind(this);
    this.handleChild2Click = this.handleChild2Click.bind(this);
  }

  handleChild1Click(nextValue) {
    this.setState({ child1Value: nextValue });
  }

  handleChild2Click(nextValue) {
    this.setState({ child2Value: nextValue });
  }

  render() {
    return (
      <div>
        <Child
          value={this.state.child2Value}
          onClick={this.handleChild1Click}
        />
        <Child
          value={this.state.child1Value}
          onClick={this.handleChild2Click}
        />
      </div>
    )
  }
}


class Child extends Component {
  constructor(props) {
    super(props);

    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.props.onClick(this.props.value + 1);
  }

  render() {
    return (
      <div>
        <p>Value of my sibling: {this.props.value}</p>
        <button onClick={this.onClick}></button>
      </div>
    )
  }
}