class App extends React.Component {
constructor(props){
super(props);
this.state = {
openModal: false
}
this.onChange = this.onChange.bind(this);
}
onChange = () => {
this.setState({openModal: true});
}
render(){
return (
<div className="wrapper">
<Header />
<Content onChange={this.onChange} openModal={this.state.openModal}/>
<Modal openModal={this.state.openModal}/>
</div>
);
}
}
class Service extends React.Component {
constructor(props){
super(props);
}
render() {
return (
<li className="services__item" onClick={this.props.onChange}>
{this.props.name}
</li>
);
}
}
class Modal extends React.Component{
constructor(props){
super(props);
}
render(){
return(
<div>
{this.props.openModal && ...}
</div>
);
}
}
openModal = () => {this.setState({openModal: true})}
this.openModal = this.openModal.bind(this);
<Component openModal={this.openModal} />
<button onClick={this.props.openModal}/>