The value of textbox does not update in React-CodePudding

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;

CodePudding user response：

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>

CodePudding user response：

use camelcase on onClick . use basic rule