onClick method of React Button using JSX

Question

I started learning the basics of JS and wrote a small example to examine how buttons work in React using JSX, but I find it to be a bit confusing.

I first create a React component and initialize a variable called bar with value 'bar' in the constructor.

I'd like to have this value change to 'baz' when a button is pressed.

My code looks like this:

<div id="root"></div>
<script type="text/babel">

    class Foo extends React.Component {
      constructor(props) {
        super(props);
        this.bar = 'bar'
      }

      baz(){
        this.bar = 'baz'
      }

      render() {
        return (
          <div>
            <button onClick={this.baz()}>baz</button>
            <p>{this.bar}</p>
          </div>
        );
      }
    }

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

</script>

Contrary to my expectations, the value 'baz' is shown right away when I load the page containing this code in my browser.

I'm sorry for asking a probably very newbie question, but I don't understand why 'baz' is shown right away, instead of only after I pressed the button. Thank you for your time. :)

@HoldOffHunger why use unnecessary IIFE? The idea is to pass function as value to property — Rafael Hovsepyan
– Rafael Hovsepyan, Commented Sep 25, 2018 at 16:18
@RafaelHovsepyan: It seems to work with that change. I posted an answer with a code sandbox where it works. — HoldOffHunger
– HoldOffHunger, Commented Sep 25, 2018 at 16:31

HoldOffHunger · Accepted Answer · 2020-06-17 03:26:06Z

6

You can try this:

class Foo extends React.Component {
  constructor(props) {
    super(props);
    this.state = { text: "bar" };
  }

  baz() {
    this.setState({ text: "baz" });
  }

  render() {
    return (
      <div>
        <button onClick={() => this.baz()}>baz</button>
        <p>{this.state.text}</p>
      </div>
    );
  }
}

ReactDOM.render(<Foo />, document.getElementById("root"));

The thing is to update the screen (DOM) its better to change state to let the component re-render. And for the problem that value was initially changed , other answers explain them well

edited Jun 17, 2020 at 3:26

HoldOffHunger

21.3k11 gold badges123 silver badges147 bronze badges

answered Sep 25, 2018 at 16:17

ashish singh

6,9142 gold badges18 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shubham Gupta · Accepted Answer · 2018-09-25 16:18:09Z

2

The way you are trying to use function is incorrect. Refer to one of the below two methods. Also, bind your function to this context in the constructor.

this.baz = this.baz.bind(this);

Then

onClick={this.baz}

OR

onClick={() => this.baz()}

edited Sep 25, 2018 at 16:18

answered Sep 25, 2018 at 16:13

Shubham Gupta

2,6461 gold badge10 silver badges19 bronze badges

1 Comment

Steve Archer Over a year ago

Note that just passing {this.baz} won't give the proper scope to the function, and setting this.bar won't work, unless you bind scope to the function somehow (with an arrow function or with .bind)

HoldOffHunger · Accepted Answer · 2018-09-25 16:28:50Z

1

I pointed out the solution in a comment above, so, I'll thresh out that comment a bit more...

You have...

<button onClick={this.baz()}>baz</button>

You want...

<button onClick={() => this.baz()}>baz</button>

I have also threshed out the rest of your code to produce the result you wanted ("I'd like to have this value change to 'baz' when a button is pressed."). You also needed...

this.setState(this);

See a full working example here:

https://codesandbox.io/s/vj904qy4o0

answered Sep 25, 2018 at 16:28

HoldOffHunger

21.3k11 gold badges123 silver badges147 bronze badges

Comments

White Elephant · Accepted Answer · 2018-09-25 16:13:55Z

0

The reason baz is shown right away is because you're calling the function in the click binding. You should also bind your click handler to your React class. Here's an example of how this should look:

<div id="root"></div>
<script type="text/babel">

    class Foo extends React.Component {
      constructor(props) {
        super(props);
        this.bar = 'bar';
        this.handleClick = this.handleClick.bind(this);
      }

      handleClick() {
        this.bar = 'baz';
      }

      render() {
        return (
          <div>
            <button onClick={this.handleClick}>baz</button>
            <p>{this.bar}</p>
          </div>
        );
      }
    }

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

</script>

answered Sep 25, 2018 at 16:13

White Elephant

1,3813 gold badges13 silver badges28 bronze badges

1 Comment

Rafael Hovsepyan Over a year ago

Or you can use arrow function and get rid of binds handleClick = () => { this.bar = 'baz'}

HoldOffHunger · Accepted Answer · 2020-06-17 03:27:33Z

0

You're calling the baz function during the render, that's why the change happens immediately:

<button onClick={this.baz()}>baz</button>

If you pass a function instead of calling a function, the function will get called when the button is pressed instead:

<button onClick={() => this.baz()}>baz</button>

edited Jun 17, 2020 at 3:27

HoldOffHunger

21.3k11 gold badges123 silver badges147 bronze badges

answered Sep 25, 2018 at 16:14

Steve Archer

6514 silver badges10 bronze badges

Comments

HoldOffHunger · Accepted Answer · 2020-06-17 03:28:13Z

0

import React, { Component } from "react";

class Bar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      bar: "bar"
    };
  }

  handleClick = () => {
    this.setState({ bar: "baz" });
  };

  render() {
    const value = this.state.bar;
    return (
      <div>
        <button onClick={this.handleClick}>baz</button>
        <p>{value}</p>
      </div>
    );
  }
}

A couple of things :

Set state in the constructor.
Use arrow functions (instead of binding in the constructor ... cleaner).
Use const when assigning a value that won't change in the function.

edited Jun 17, 2020 at 3:28

HoldOffHunger

21.3k11 gold badges123 silver badges147 bronze badges

answered Sep 26, 2018 at 0:47

Mo7

12910 bronze badges

Comments

HoldOffHunger · Accepted Answer · 2020-06-17 03:28:37Z

0

You need to store your values in state, and then bind you click handler to the component. Then use setState() to change the value of state. When state changes, your component will re-render:

class Foo extends React.Component {
      constructor () {
        super()
        this.state = {
          bar: 'bar'
        }
        this.handleClick = this.handleClick.bind(this)
      }
      handleClick () {
        this.setState({
          bar: 'baz'
        })
      }
      render () {
        return (
          <div>
            <button onClick={this.handleClick}>baz</button>
            <p>{this.state.bar}</p>
          </div>
        )
      }
}

edited Jun 17, 2020 at 3:28

HoldOffHunger

21.3k11 gold badges123 silver badges147 bronze badges

answered Sep 25, 2018 at 16:15

adam.k

6423 silver badges17 bronze badges

Collectives™ on Stack Overflow

onClick method of React Button using JSX

7 Answers 7

Comments

1 Comment

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

1 Comment

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related