Нажатие кнопки показать / скрыть в компонентах React

Question

Я хотел бы знать, как показать / скрыть между компонентами, нажав на раскрывающийся список Show Data, должен скрыть изображение и показать текст. У меня есть Home компонент, в котором я использую Option Компонент, нажав Show Data, должен отобразить текст Welcome!!! и скрыть изображение, как это сделать в реакции

import Option from "./Option";
class Home extends React.PureComponent {
 constructor(props) {
    super(props);
  }
  render() {
    return(
      <Option/>
      <img src="abc.jpg" width="100%"/>
      // after option `show data` selected, hide image and show below data
      <div>Welcome!!!</div>
    )
  }
}

class Option extends React.PureComponent{
  constructor(props) {
    super(props);
    this.state = {
      isOpen: false
    };
  }
  toggleOpen = () => this.setState({ isOpen: !this.state.isOpen });
  render(){
    const menuClass = `dropdown-menu${this.state.isOpen ? " show" : ""}`;
    return(
      <button className="btn btn-secondary dropdown-toggle" id="dropdownMenuButton"  aria-haspopup="true" type="button" data-toggle="dropdown"> Dropdown</button>
       <div className={menuClass} aria-labelledby="dropdownMenuButton">
          <a className="dropdown-item">
            Show Data
          </a>
       </div>
    )
  }
}
export default Option;

Answer 1

Ваш домашний компонент:

class Home extends React.PureComponent {
 constructor(props) {
    super(props);
    this.state={
        showImage:false
    }
  }
  change = () =>{
      this.setState({
          showImage:!this.state.showImage
      })
  }
  render() {
    return(
      <>
      <Option change={this.change}/>
      {
          this.state.showImage?
              <img src="abc.jpg" width="100%"/>
            :
            <div>Welcome!!!</div>
      }
      </>
    )
  }
}

Ваш дополнительный компонент:

class Option extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      isOpen: false
    };
  }
  toggleOpen = () => this.setState({ isOpen: !this.state.isOpen });
  render(){
    const menuClass = `dropdown-menu${this.state.isOpen ? " show" : ""}`;
    return(
      <>
      <button onClick={()=>this.props.change()} className="btn btn-secondary dropdown-toggle" id="dropdownMenuButton"  aria-haspopup="true" type="button" data-toggle="dropdown"> Dropdown</button>
       <div aria-labelledby="dropdownMenuButton">
          <a className="dropdown-item">
            Show Data
          </a>
       </div>
      </>
    )
  }
}

Что я сделал, это:

1.Created onchange function in home function and passed as prop to option
2.On click of button i called onchange function in Option component.
3.I am maintaining flag in Home component for conditional rendering.
4.For now i have onchange function on button click,you can have it anywhere and call it.

Дайте мне знать, если вы получите это или нет.