React

HTML

<div id="app"></div>

React

class Modal extends React.Component {
constructor(props) {
super(props);
this.state= {
showModal: false
}
this.toggleModal = this.toggleModal.bind(this)
}
toggleModal() {this.setState({showModal: !this.state.showModal})}
render() {
const { showModal } = this.state;
return(
	<div className="modal">
	  {showModal && 
    <div>
    Showing modal
    </div>
    }
	</div>
)
}
}

class TodoApp extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    	
    }
    this.modalRef = React.createRef()
		this.handleClick = this.handleClick.bind(this);
  }
  
  handleClick() {
  this.modalRef.current.toggleModal();
  }
  
  render() {
    return (
      <div className="parent">
        <Modal ref={this.modalRef} />
        <button onClick={this.handleClick}>Click</button>
      </div>
    )
  }
}

ReactDOM.render(<TodoApp />, document.querySelector("#app"))