const Modal = (props) => {

  return (

    <div className={props.show ? 'show' : 'hide'}>modal</div>

  )

}

​

const styles = {

    main__title: 'main__title',

    addtask: 'addtask'

}

​

class App extends React.Component {

   constructor(props) {

      super(props);

      this.state = {show: false};

      this.toggleModal = this.toggleModal.bind(this);

   }

​

   render() {

       return (

           <div>

              <h2 className={styles.main__title}>Helloooo!</h2>

              <Modal show={this.state.show} /> 

              <button onClick={this.toggleModal} className={styles.addtask}>&#x2795;</button>

           </div>

       );

   }

​

   toggleModal(){

       this.setState({

          show: !this.state.show

       });

   }

​

}

ReactDOM.render(<App />, document.getElementById('root'));