CODEWITHSUNDEEP
reactjs
farnaz
farnaz

Reputation: 13

The value of textbox does not update in React

I am new to react, I have a textbox, and I want by clicking on ++, it increase by 1, but the value does not change by clicking, although I set setVal, Any idea

import React, { useState } from 'react';

 function WidgeStar (){

    const [val, setVal ] = useState (20);
       
    return (
        <div>
            <div><input type="button" value="1" onclick = {() => setVal(16)} text="1" /></div>
            <div><input type="button" value="2" onclick = {() => setVal(16)} text="2" /></div>
            <div><input type="button" value="3" onclick = {() => setVal(16)} text="3" /></div>           
            <div><input type="button" value="++" onclick = {() => this.setVal(val-1)} /></div>
            <div><input type="button" value="--" onclick = {() => setVal(val-1)} /></div>       
            <div><input type="text" value= {val} /></div>
             
        </div>
    );
 } 
export default WidgeStar;

Upvotes: 1

Views: 35

Answers (1)

Donut
Donut

Reputation: 112815

Change onclick to onClick - see "Handling Events" from the React documentation. Also, you don't need to call this.setVal, just setVal. And if you want ++ to increment the value, you should use val+1 instead of val-1 (it looks like your code does the same thing for ++ and -- at the moment):

<div><input type="button" value="++" onClick = {() => setVal(val+1)} /></div>

Upvotes: 1

Related Questions