Not showing any text when clicked on the button in reactjs

Question

I am trying to implement in toggle button feature where when clicking on button willshowtext and clicking on button again willhidetext.

When i tried implement this i am stuck at displaying the text . I used the below for showing the text

import React, { Component } from "react";

export default class DisplayStats extends Component {
    constructor(props) {
        super(props);
        this.handleClick = this.handleClick.bind(this);
      }
      handleClick = () => {
        console.log('Click happened');
        <div>HELLO</div>
      }
    render() {
        return (
          <div className="container">
              <h1>This is the stats.</h1>
            <button onClick={this.handleClick}>Click Me</button>
            </div>
        )
      }
    }

With this i can see the console.log is created but i cant able to see the HELLO when i clicked on the button.

Am i missing anything here ?

Any help is appreciated

Thanks

Answer 1

That is not how react and other state based frameworks work. The idea is that the view should change when the state changes and only state can cause any change in the view. What you would need to do is on click of button, change the state which in turn will cause your view to update

import React, { Component } from "react";

export default class DisplayStats extends Component {
    constructor(props) {
        super(props);
        this.handleClick = this.handleClick.bind(this);
        this.state = {
          visible: false
        }
      }
      handleClick = () => {
        this.setState({visible: !this.state.visible});
      }
    render() {
        return (
          <div className="container">
              <h1>This is the stats.</h1>
              <button onClick={this.handleClick}>Click Me</button>
             { this.state.visible ? <div>Hello</div> : '' }
            </div>
        )
      }
    }

Answer 2

You should change state on toggle.

import React, { Component } from "react";

export default class DisplayStats extends Component {
    state = {
     isToggled : false
    }
    constructor(props) {
        super(props);
      }
      handleClick = () => {
        console.log('Click happened');
        this.setState({isToggled : !this.state.isToggled});
      }
    render() {
        return (
          <div className="container">
              <h1>This is the stats.</h1>
            <button onClick={this.handleClick}>Click Me</button>
            </div>
          {(() => {
            if(this.state.isToggled){
              return <div>HELLO</div>
            }
            else{
             return <div></div>
            }
          })()}
        )
      }
    }

Answer 3

You cannot return an element from an event handler and have it render like that.

You need to hide the text behind a flag and then toggle that flag.

First we create a flag in state. This defines if the toggle text should be displayed.

this.state = {
    showText: false  // Should the text be displayed?
};

Next we update the click handler to toggle that state flag.

this.setState((state) => ({
    showText: !state.showText  // Toggle showText
}))

Finally we conditionally render the toggle text. If showText is true, then render the text, if it is false do not render it.

{this.state.showText && <div>HELLO</div>}

Optional: As pointed out by Mosè Raguzzini you do not need to bind your event handler.

this.handleClick = this.handleClick.bind(this);  // This is not needed
handleClick = () => {}  // because this is an arrow function

All together now:

import React, { Component } from "react";

export default class DisplayStats extends Component {
    constructor(props) {
        super(props);

        this.state = {
            showText: false  // Should the text be displayed?
        };
      }

      handleClick = () => {
        console.log('Click happened');
        this.setState((state) => ({
            showText: !state.showText  //  Toggle showText
        }))
      }
    render() {
        return (
          <div className="container">
              <h1>This is the stats.</h1>
              {this.state.showText && <div>HELLO</div>}
              <button onClick={this.handleClick}>Click Me</button>
            </div>
        )
      }
    }

Answer 4

To achieve this, you'll want to track state in your component to determine if the text should be displayed or not. The following code should achieve what you're after:

export default class DisplayStats extends Component {

    constructor(props) {
        super(props);
        this.handleClick = this.handleClick.bind(this);
      }

      handleClick = () => {
        console.log('Click happened');

        // When the button is clicked, the text display state is toggled
        this.setState({ showText : !this.state.showText })
      }

      render() {
        // Extract state to determine if the text should be shown
        const showText = !!this.state.showText 

        return (
          <div className="container">
              { /* Render div with text is showState is truthy /* }
              { showText && <div>HELLO</div> }
              <h1>This is the stats.</h1>
            <button onClick={this.handleClick}>Click Me</button>
            </div>
        )
      }
    }

Answer 5

You do not need to use bind if you already use arrow functions, beside this, you have to learn how to manage state:

import React, { Component } from "react";

export default class DisplayStats extends Component {
    constructor(props) {
        super(props);
        this.state = {
          displayedText: '',
        }
      }
      handleClick = () => {
        console.log('Click happened');
        this.setState({ displayedText: 'This is my text.'});
        
      }
    render() {
        return (
          <div className="container">
              <h1>This is the stats. {this.state.displayedText}</h1>
            <button onClick={this.handleClick}>Click Me</button>
          </div>
        )
      }
    }