How to change the state value using a click button

Question

I write a JSX code in order to create a reset button in which i can made a reset to the timer value using "state".The problem is when i click to the button nothing happends instead of getting the value changed.(Even when i want to display a console msg through the reset function nothing happends)

A created a "state.timer" variable in order to add the value of to display. A function to made the reset to the "timer" value and change it to 0. A button which call the reset function in order to made the reset.

import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";

class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      timer: 90
    };

    function resetTime() {
      this.setState({ timer: 0 });
    }
  }
  render() {
    return (
      <div className="App">
        <h2>{this.state.timer}</h2>
        <button onClick={this.resetTime}>Reset</button>
      </div>
    );
  }
}

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

Expected to display 0 when i click to the reset button instead the value still display 90.

You are accessing the method setState statically.. it should be this.setState({timer:0})... — kemicofa
– kemicofa, Commented Feb 16, 2019 at 16:37
nothing change, i think that the onClick button doesn't work. — hichem belfekih
– hichem belfekih, Commented Feb 16, 2019 at 16:40
I changed the code of the reset function by testing it through msg display console.log but also nothing happends.I think that the click button doesn't work.Here my code: codesandbox.io/s/033xl8kjmn — hichem belfekih
– hichem belfekih, Commented Feb 16, 2019 at 16:42

Community · Accepted Answer · 2020-06-20 09:12:55Z

3

Problem

You had a few things wrong.

You need to use this instead of Timer when accessing setState (ex: this.setState())
You need to wrap the onPress callback in an anonymous function so the context isn't lost (ex: onPress={()=>this.resetTime()} )

Destructuring Assignment:

Writing const {timer} = this.state; is exactly the same as const timer = this.state.timer;

Think of it as a simpler and more elegant way of accessing properties.

Why seperate it ? Well image if you had multiple properties in state (not just timer). That would mean you would have to write this.state.timer, this.state.someOtherProperty, this.state.somethingElse. Why do that and make it harder to read, when you could just do this.

const {timer, someOtherProperty, somethingElse} = this.state;

Code updated:

import React from "react";

export default class Timer extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      timer: 90
    };
  }

  resetTime() {
    this.setState({ timer: 0 });
  }
  render() {
    const { timer } = this.state;
    return (
      <div className="App">
        <h2>{timer}</h2>
        <button onClick={() => this.resetTime()}>Reset</button>
      </div>
    );
  }
}

Working example here.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Feb 16, 2019 at 16:47

kemicofa

17.7k10 gold badges93 silver badges145 bronze badges

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

1 Comment

hichem belfekih Over a year ago

const { timer } = this.state . Please as beginner programmer can you explain me this code. You are calling this.state.timer through this code ? because i didn't understand { timer } i know only the this.state.variableName in order to call a state value.

TRomesh · Accepted Answer · 2019-02-16 16:54:21Z

1

Try something like this. You will need to bind the function to the constructor.

import React from "react";
import ReactDOM from "react-dom";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      timer: 90
    };
    this.resetTime = this.resetTime.bind(this);
  }

  resetTime() {
    this.setState({ timer: 0 });
  }
  render() {
    return (
      <div className="App">
        <h2>{this.state.timer}</h2>
        <button onClick={this.resetTime}>Reset</button>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

You can also you an arrow functions but this technique relies upon the proposed class property feature. To use this approach, you must enable transform-class-properties or enable stage-2 in Babel. If you are using Create-React-App it will be already configured.

 resetTime =()=> {
      this.setState({ timer: 0 });
 }

edited Feb 16, 2019 at 16:54

answered Feb 16, 2019 at 16:43

TRomesh

4,4698 gold badges51 silver badges80 bronze badges

1 Comment

Sergey Poltaranin Over a year ago

Or you can use arrow functions resetTime = () => { ... } instead of bind in constructor.

josepdecid · Accepted Answer · 2019-02-16 16:39:23Z

0

The state corresponds to the component instance, is not a static variable of your class. Instead of accessing via Timer.setState call it from the instance with this.setState.

answered Feb 16, 2019 at 16:39

josepdecid

1,8871 gold badge18 silver badges26 bronze badges

Collectives™ on Stack Overflow

How to change the state value using a click button

3 Answers 3

Problem

Destructuring Assignment:

Code updated:

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Problem

Destructuring Assignment:

Code updated:

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related