Change of input value with state in React JS

Question

I am having 3 text boxes in which users enter values alongwith that I have 3 sliders for which the value is set based on calculation of percentage from the entered values. My problem is I also want to change the text box values based on calculation formulas. So the text box I want them to reflect values with calculation as the slider values change plus user can also type in values.For eg for first textbox I want to calculate value inside with (total-b-c). So with changes in slider values of percentages the values in textboxes should also change. I am unable to do that now-

Here is some supporting code for the same-

const [userValues, setUserValues] = useState({
    a: '0',
    b: '0',
    c: '0',
    
    
  });
const handleInputChange = (event) =>{
   setUserValues({ ...userValues, [event.target.name]: event.target.value });
    
}

Textboxes-

  <div className="container1">
      
        <div className="headingsleft">Enter number of <br></br> invoices</div>
        <div>
        <h4 style={{fontWeight:500, marginLeft:30,fontSize:19}}>a Invoices</h4>
        <br></br>
        <br></br>
       <TextField  label="p.a." type="number" name="a" size="small"  className={classes.root}  inputProps={{ min: "0" }}  variant="outlined"  value={userValues.nonedinumber}  onChange={handleInputChange} required error={userValues.a=== ""}   helperText={userValues.a=== "" ? 'Required' : ' '}  ></TextField> 
      
      
         </div>
          
        <div>
        <h4 className="headings">b Invoices</h4>
        <br></br>
        <br></br>
        <TextField label="p.a." type="number" name="b" size="small" className={classes.root}  inputProps={{ min: "0" }} variant="outlined" value={userValues.b} onChange={handleInputChange} required error={userValues.b=== ""}   helperText={userValues.b=== "" ? 'Required' : ' '}/> 
        </div>


        <div>
        <h4 style={{fontWeight:500, marginLeft:30,fontSize:19}}>cInvoices</h4>
        <br></br>
        <br></br>
        <TextField label="p.a." type="number" name="c" size="small" className={classes.root} inputProps={{ min: "0" }}  variant="outlined" value={userValues.c} onChange={handleInputChange} required error={userValues.c=== ""}   helperText={userValues.c=== "" ? 'Required' : ' '}/> 
        </div>


       
        <div>
        <h4 style={{fontWeight:500, marginLeft:30,fontSize:19}}>Total Invoices</h4>
        <br></br>
        <br></br>
        <TextField label="p.a." type="number" size="small" id="total" value={total} disabled variant="outlined"  /> 
        </div>
       
      
       
      </div>

code for the slider-

const Inputaftercalculate = (props) => {
    const classes = useStyles();
    
    return (
        <div>
              <div className="container2">

              <div className="headingsleft">Percentage Distribution 
           
</div>

            <div >
            <br></br>
            <br></br>
            <Typography   className={classes.slider}  id="discrete-slider-always" gutterBottom>

            </Typography>
            <Slider 
            defaultValue={20}
            getAriaValueText={valuetext}
            aria-labelledby="discrete-slider-always"
            step={10}
            marks={marks}
            valueLabelDisplay="on"
            value={props.a}
            disabled
            />
            </div>

            <div>
            <br></br>
            <br></br>
            <Typography className={classes.slider}  id="discrete-slider-always" gutterBottom>

            </Typography>
            <Slider
            defaultValue={20}
            getAriaValueText={valuetext}
            aria-labelledby="discrete-slider-always"
            step={10}
            marks={marks}
            valueLabelDisplay="auto"
            value={props.b}
            />
            </div>

            <div>
            <br></br>
            <br></br>
            <Typography className={classes.slider}  id="discrete-slider-always" gutterBottom>

            </Typography>
            <Slider
            defaultValue={1}
            getAriaValueText={valuetext}
            aria-labelledby="discrete-slider-always"
            step={10}
            marks={marks}
            valueLabelDisplay="auto"
            value={props.c}
            />
            </div>


</div>
        </div>

How can I make the input textboxes adjust inside values based on changes in slider values and also let users input in the textbox whenever they need to change values?

Answer 1

First you got get the value and it respective key from the event, then expand it and finally assign the value to the respective key name as shown bellow.

const handleInputChange = e => { const {name, value} = e.target; handleInputChange({ ...userValues, [name]: value, }) }