Show sibling components reactJs

Question

I'm new on react world, I would show components from sibling components. I have parent component:

import Toast from './components/Toast/Toast'
class App extends Component {
    constructor(){
        super();
        this.state = {
            showToast:false
        };
    }   
  render() {
    return (
       <div id="cont">
          <Toast showToast={this.state.showToast}/>
          <Header />
        </div>

    );
  }
}

In my Toast component:

class Toast extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        const showToast = this.props.showToast;

        let toast = null;
        if (showToast) {
          toast = <div className="visible">Toast Ok</div>;
        }else{
            toast = null;
        } 

        return (
          <div>
            {toast}
          </div>
        );
      }
}

export default Toast;

And in my Header component I have:

class Header extends Component {
    render() {
       return (
         <button> // With click, show toastComponents so setState parent </button>
       )
    }

So if I click on button I would set state key showToast for show my components.

Answer 1

You can pass a function down to your <Header> component, then call it when the button is clicked.

let showToast = () => this.setState({ showToast: true });
// ...
<Toast showToast={this.state.showToast}/>
<Header onClick={showToast}>

Then all you need to do is pass this prop through to the click handler inside <Header> .

<button onClick={this.props.onClick}>