javascript - Input State not updating correctly - React

Question

Every time I update the text of the input, it doesn't update. When i update the text a second time, the state updates to the text of the first update. I'm not sure what exactly is happening but I suspect it's a deep/shallow copy error I'm not seeing? Any help would be appreciated

    const DropDownPrompt = (props) => {

    //set type by passing hook through props
    const [dropDownOptions, setDDoptions] = useState([{id : 1 , value : "Value 1"},{id : 2 , value : "Value 2"}]);

    return (
  
        <div className="mb-0 p-3">
        <Row>
            <Col>
    <FormGroup>
    <Label htmlFor="exampleSelect" style={{fontWeight : "bold"}}>Preview</Label>
    <Input type="select" name="select" id="exampleSelect">
        {dropDownOptions? dropDownOptions.map((ddO) => 
            <option>{ddO.value}</option>
        ):null}
    </Input>
</FormGroup>
</Col>
<Col>
<Label style={{fontWeight : "bold"}} >Options (at least 2)</Label>
{dropDownOptions? dropDownOptions.map((ddO, index) => 
<Row>
            <FormGroup>
                <Label  check >
              <Input  key = {index } type="text" value = {ddO.value} bsSize="sm"  onChange= { async (e) =>{
           
                  let carrier = [...dropDownOptions]

                  carrier[ddO.id - 1] = {...carrier[ddO.id - 1], value : e.target.value }
                  
                  
                  setDDoptions(carrier)

                console.log(dropDownOptions)
                
                  }} />

              </Label>
            
              {ddO.id > 2 ?
              <Button className="btn-wrapper--icon ml-2 btn-link btn-sm" >
            <FontAwesomeIcon icon={['fas', 'minus-circle']} className="font-size-lg text-danger" />
            </Button>:null}
            </FormGroup>
            </Row>
        ):null}

    



<Button  className="btn-link" onClick = {() => {setDDoptions ([...dropDownOptions, {id : dropDownOptions.length + 1, value : `Value ${dropDownOptions.length + 1}`}])}} >
                <span className="btn-wrapper--icon">
                    <FontAwesomeIcon icon={['fas', 'plus-circle']} className="font-size-lg" />
                </span>
                <span className="btn-wrapper--label">
                    Add another
            </span> </Button>
</Col>
</Row>
</div>

        )
  }

  export default (DropDownPrompt)

question from:https://stackoverflow.com/questions/65910831/input-state-not-updating-correctly-react

Answer 1

Waitting for answers