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?

I not sure if I understood correctly, But did you try repeating 'Box1' and pass dynamic text? — venu
– venu, Commented Jul 31, 2018 at 22:45
No, just applied this code to Thursday (same code under this existing one) and tried to export Monday and Thursday in same file and I got error only one default export allowed per module. @venu — user9347049
– user9347049, Commented Jul 31, 2018 at 22:49

Hemadri Dasari · Accepted Answer · 2018-08-01 09:21:59Z

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.

Adam Nathaniel Davis · Accepted Answer · 2018-07-31 23:48:30Z

1

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>
 );
}

answered Jul 31, 2018 at 23:48

Adam Nathaniel Davis

4354 silver badges13 bronze badges

Comments

Adam Nathaniel Davis · Accepted Answer · 2018-07-31 23:37:59Z

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'));

Collectives™ on Stack Overflow

How to render different content with onclick event using ReactJS

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related