Change part of parent from child - React.js

Question

I know there were similar questions but non of them answered my question. To visualize the problem here is what it looks like.

Ok, so i have the following problem: After i click Left component i want to change the Body to BodyLeftClicked, after i click Right component i want to change the Body to BodyRightClicked.

I have App component sth like this:

class App extends React.Component {
    state = { choose: "Left" }; //initialize one body

    render() {
        return (
            <div className="All">
                <div className="head">
                    <Top name={"Left"}/>
                    <Top name={"Right"}/>
                </div>

                <div className="body">
                    {(() => {
                        switch(this.state.choose) {
                            case "Left":
                                 return <BodyLeftClicked choose={this.state.choose}/>;
                            case "Right":
                                return <BodyRightClicked choose={this.state.choose}/>;
                        }
                    })()}

                </div>
            </div>
        );
    }
}

Two components at the top of the page (Left and Right components) are made by:

class Top extends React.Component {
    constructor(props) {
        super(props);
        this.state = { name : this.props.name };
        this.onButtonClick = this.onButtonClick.bind(this);
    }

    onButtonClick() {
        //CHANGE THE BODY WHICH IS BEING SHOWN IN APP 
    }

    render() {
        return (
            <div>
                <button className="Button" type="button" onClick={this.onButtonClick}>{this.state.name}</button>
            </div>
        )
    }
}

And example of body Component:

class BodyLeftClicked extends React.Component {
constructor(props) {
        super(props);
        this.state = { choose : this.props.choose };
    }
    render() {
        return (
            <div className="BodyLeftClicked">  </div>
        )
    }
}

Answer 1

You'd basically want to create a method in the App class and pass it down to your Left/Right components. In the method use setState and it would change according to the argument passed to it. It would look something like this:

class App extends React.Component {
  state = { choose: "Left" };

  setChoose = position => {
    this.setState({ choose: position });
  }
}

Then pass it down as so:

<Top name="Left" onButtonClick={ this.setChoose } />

and call it from within the component through a click handler:

class Top extends React.Component {
  render() {
    return (
      <div>
        <button className="Button" type="button" onClick={props.onButtonClick}>{this.state.name}</button>
      </div>
    );
  }
}

Ideally you'd do the same for the right component.

Using Hooks

Pretty much the same thing but you would use, useState and get the setter method for free essentially:

function App(props) {
  const [choose, setChoose] = useState('Left');

  return (
    <Top name="Left" onButtonClick={ setChoose } />
  );
}