Home / Questions / 450854
Accepted
Claudio
Asked: 2022-05-11 11:09:29 +0800 CST 2022-05-11 11:09:29 +0800 CST

How to get the value of the select in React with useState?

  • 772

I am trying to get the value of the select to set the value to the typeOp variable of the useState

enter image description here

If I choose the egress option , the console shows "entry" and if I then choose the entry option, the console shows "egress" . Why does this happen?

here my code:

const [typeOp, setTypeOp] = React.useState('ingreso');


const captureType = (e) => {
  setTypeOp(e.target.value);
  console.log(typeOp);
}

return (

  <Form.Control as="select" onChange={captureType}>
      <option value={typeOp}>Ingreso</option>
      <option value="egreso">Egreso</option>
  </Form.Control>

);

reactjs

1 Answers

  1. Best Answer

    This problem is partly because console.log()it shows you the value of the state typeOpbefore it is set.

    If you would put the console.log()between the captureTypeand returnyou could see the status already updated.

    But even doing that there would still be a bug to fix.

    The main problem is valuewhat you are putting in the first <option>.

    It shouldn't be {typeOp}because as it is it will take the value of the state that when it reaches the value of "Egress" it won't change anymore.

    To correct it you should change the one valueof the first option and the position of the one console.log()like this:

    const [typeOp, setTypeOp] = React.useState('ingreso');

const captureType = (e) => {
    setTypeOp(e.target.value);
}

console.log(typeOp);

return (

    <Form.Control as="select" onChange={captureType}>
        <option value="ingreso">Ingreso</option>
        <option value="egreso">Egreso</option>
    </Form.Control>

);
    • 1