“Reset” button won't work unless it refreshes page, and gives me an error otherwise (React.JS)

Question

So I'm working in React.JS, and I'm trying to make something like an input field, where a user can enter a number of their choice, and it will show up in the text.

I decided to add a "Reset to zero" button, as an extension.

             <div>
                Count: {this.state.value}
                <form>
                <input type="number" value = {this.state.value} onChange = {this.inputChange}/>
                <br/>
                <button onClick = {this.reset}>reset to zero</button>
                </form>     
            </div>          

It works, but it refreshes the page every time it does so.

I read online, and I decided to add "type=button" to my button as so:

<button type="button" onClick = {this.reset}>reset to zero</button>

When I run my code again, it still increments fine, but when I click the button, nothing happens, and when I try to increment it again, I get an error, "TypeError: this.setState is not a function".

The error is coming from this method:

inputChange = event => {
        this.setState ({value: event.target.value})
    }

I know where the error is coming from, but I don't know why it happened, or how to fix it (note that I'm also a beginner at JavaScript and React.JS)

I hope someone can help me.

Here's my code in entirety, for reference.

class Slider extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            value: 0
        }
    }
    inputChange = event => {
        this.setState ({value: event.target.value})
    }
    reset = () => {
        this.setState = ({
            count: 0
        })
    }
    render() {
        return (
            <div>
                Count: {this.state.value}
                <form>
                <input type="number" value = {this.state.value} onChange = {this.inputChange}/>
                <br/>
                <button type = "button"onClick = {this.reset}>reset to zero</button>
                </form>     
            </div>

        );
    }
}

Thank you guys, in advance.

Answer 1

The reason nothing happens on reset and you are getting that error on input change, is that you are reassigning this.setState in your reset function rather than calling it. Also, you are setting count instead of value , which would lead to the wrong state being set.

This is what your reset function should be:

reset = () => {
    this.setState ({
        value: 0
    })
}

When you call this.setState , React will trigger a re-render in your component with the new state.

That is currently not happening when you click reset. On your subsequent call to inputChange, this.setState has been reassigned with an object, and is no longer callable, throwing that error.

Answer 2

Try replacing your button like this:

<button type = "button"onClick = {this.reset.bind(this)}>reset to zero</button>

This will force the method to execute being this the scope.