title: How to render different content with onclick event using ReactJS
body: <p>How can I dynamically render different content with clicking on different buttons.</p>
  
  <p>I am trying to create schedule which by clicking on Monday button will show only exercises and time for Monday, by clicking on Thursday it will show only exercise and time for Thursday and so on.</p>
  
  <p>Live example is here <a href="https://www.free-css.com/free-css-templates/page228/stamina" rel="nofollow noreferrer">https://www.free-css.com/free-css-templates/page228/stamina</a></p>
  
  <p>On schedule part.</p>
  
  <p>I have this code so far, is not much but...</p>
  
  <pre><code>import React from 'react';
  
  class Monday extends React.Component {
      constructor (props) {
        super(props)
        this.state = { show: true };
  
        this.toggleDiv = this.toggleDiv.bind(this)
      }
  
      toggleDiv = () =&gt; {
        const { show } = this.state;
  
      }
      render () {
        return (
          &lt;div&gt;
            &lt;button onClick={ this.toggleDiv } &gt;
              Monday
            &lt;/button&gt;
           {this.state.show &amp;&amp; &lt;Box1 /&gt;}
          &lt;/div&gt;
        );
      }
    }
  
    class Box1 extends React.Component{
        render(){
            return(
              &lt;div&gt;
                  Monday time
              &lt;/div&gt;
            )
        }
    }
  
  
   export default Monday;
  </code></pre>
  
  <p>I have tried same thing with Thursday, just applying this code on Thursday but only one default export allowed per module.</p>
  
  <p>How can I edit code to apply it for all days?</p>