How to render different content with onclick event using ReactJS

Question

How can I dynamically render different content with clicking on different buttons.

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.

Live example is here https://www.free-css.com/free-css-templates/page228/stamina

On schedule part.

I have this code so far, is not much but...

import React from 'react';

class Monday extends React.Component {
    constructor (props) {
      super(props)
      this.state = { show: true };

      this.toggleDiv = this.toggleDiv.bind(this)
    }

    toggleDiv = () => {
      const { show } = this.state;

    }
    render () {
      return (
        <div>
          <button onClick={ this.toggleDiv } >
            Monday
          </button>
         {this.state.show && <Box1 />}
        </div>
      );
    }
  }

  class Box1 extends React.Component{
      render(){
          return(
            <div>
                Monday time
            </div>
          )
      }
  }


 export default Monday;

I have tried same thing with Thursday, just applying this code on Thursday but only one default export allowed per module.

How can I edit code to apply it for all days?

Answer 1

You no need to have multiple components for each calendar day. You can have single component and reuse it. You can use string variable instead of Boolean in the state so that on different buttons click you can render different components. Also you are already using arrow function so you no need to do object/function binding in constructor.

Also import only what you need, don’t import everything from the module, example importing only React and calling React.Component which will load all of its exported modules into bundle. So instead import only Component.

I am giving below code with assumption that you are not rendering buttons dynamically.

  import React, {Component} from 'react';

  export class Monday extends Component {
      constructor (props) {
           super(props)
           this.state = { showComponent: “” };
       }

      toggleDiv = (name) => {
            if(name === “monday”){
                  this.setState({
                       showComponent: “box1”
                  });
             }else if(name === “thursday”){
                  this.setState({
                      showComponent: “box2”
                  });
            }else{
                 this.setState({
                      showComponent: “”
                  });
            }
       }
      render () {
         return (
            <div>
               <button onClick={ this.toggleDiv(“monday”) } >
                     Monday
                </button>
              {this.state.showComponent === “box1” && <Box1 />}
               <button onClick={ this.toggleDiv(“thursday”) } >
                     Thursday
               </button>
               {this.state.showComponent === “box2” && <Box2 />}
                </div>
            );
         }
       }

       export class Box1 extends Component{
            render(){
                  return(
                       <div>
                            Monday time
                       </div>
                    )
               }
         }

              export class Box2 extends Component{
                      render(){
                           return(
                               <div>
                                     Thursday time
                                </div>
                              )
                        }
                 }

The reason you are getting exports module issue because you are by default exporting Monday so a module can export only one component by default and that’s the rule. If you want to export multiple components from single module then export each component individually using export class Monday extends Component instead of export default Monday.

Hope this resolves your query.

Answer 2

And here's another approach using a dynamic CSS display property:

Working example:

https://stackblitz.com/edit/react-toggle-content-on-click-a8gt5g

And the relevant code:

render() {
 return (
    <div>
      <p onClick={() => this.toggle()}>
         Click This Text
      </p>
      <br />
      <br />
      <div style={{display : this.state.showOn ? 'inherit' : 'none'}}>
         <On/>
      </div>
      <div style={{display : this.state.showOn ? 'none' : 'inherit'}}>
         <Off/>
      </div>
    </div>
 );
}

Answer 3

Here's a working example:

https://stackblitz.com/edit/react-toggle-content-on-click

And here's the code from the main component:

import React, { Component } from 'react';
import { render } from 'react-dom';
import On from './on';
import Off from './off';
import './style.css';

class App extends Component {
  constructor() {
     super();
     this.state = {
        name: 'React',
        showOn : true,
     };
  }

  render() {
     let toggledContent = null;
     if (this.state.showOn) {
        toggledContent = <On name={this.state.name} />;
     } else {
        toggledContent = <Off name={this.state.name} />;
     }
     return (
        <div>
          <p onClick={() => this.toggle()}>
             Click This Text
          </p>
          <br />
          <br />
          {toggledContent}
        </div>
     );
  }

  toggle() {
        this.setState((prevState, props) => {
            return {showOn : !prevState.showOn };
        });
  }
}

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