Passing state from child to child in react

Question

I am just starting to learn coding so please bear with me. Could you help me solve the following problem? I am trying to pass a state from one child component to another child component, I am using react-typist, once typing is done, I would like to change the style on my other component, which is my navigation bar. I believe I should lift the state up, but I cannot make it work. Here is my code:

import Typist from 'react-typist';

class Intro extends Component {
      constructor (props) {
      super(props);
         this.state = {
         navStatus: 'back'
      };
      this.onIntroTyped=this.onIntroTyped.bind(this);
    }

    onIntroTyped(front){
    this.setState({ navStatus: 'front'});
    }

        render() {
        return (
          <Typist avgTypingDelay={10} 
          startDelay={0} 
          onTypingDone={this.onIntroTyped} 
          navStatus={this.state.navStatus}
          onIntroTyped={this.onIntroTyped}>
          <div class="text">
            .....
            </div>
          </Typist>
        );
      }
}

export default Intro;


class Nav extends Component {
    constructor(props) {
        super(props);
        this.state = {
            id: "slider",
            navStatus: "back"
        };      
    }

    onMenuClick = (event) => {
        if (this.state.id === "slider"){
            this.setState({id: "sliderOut"});
        }
        else (this.setState({id: "slider"}));
    }

    render () {
        return (
            <nav id="navigation" className={"navStatus"}>
            <div class="links">
            <a  href="#" onClick={this.onMenuClick}>Menu</a>
            ...
            </div>
            </nav>

        );
    }
}

export default Nav;

Answer 1

Moved state up to a wrapper parent component (Container component) called Test in this case.

The state "navStatus" is shared among its children's and the value is available to each children via props.

Also when a child want to change the value of that shared state it calls a method supplied by parent in this case it is onIntroTyped. State of parent gets changed and all child elements gets rendered because of that and they have updated shared value via props.

Just for illustration purpose, see below example

class Test extends React.Component {

   constructor(){
     super();
     this.state = {
       navStatus: "back"
     };
     this.onIntroTyped=this.onIntroTyped.bind(this);
   }
  onIntroTyped(){
    this.setState({ navStatus: 'front'});
  }
  
  render() {
    return ( 
    <div>
          <Nav navStatus={this.state.navStatus} />
          <Intro onIntroTyped={this.onIntroTyped} />
      </div>
    );
  }

}

class Intro extends Component {
      constructor(props) {
          super(props);
      }
    
    render() {
        return (
          <button onClick={this.props.onIntroTyped}> test Intro typed </button>
        );
      }
}

class Nav extends Component {
    constructor(props) {
        super(props);
        this.state = {
            id: "slider",
        };      
    }

    onMenuClick = (event) => {
        if (this.state.id === "slider"){
            this.setState({id: "sliderOut"});
        }
        else this.setState({id: "slider"});
    }

    render () {
        return (
            <nav id="navigation" className={this.props.navStatus}>
            <div class="links">
            <a  href="#" onClick={this.onMenuClick}>Menu</a>
            ...
            </div>
            </nav>

        );
    }
}

ReactDOM.render( <Test /> ,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>