Update an element of a list of objects in react hooks. Bind an array to a list of select controls

Question

and two components:

function ExamenAplicado({alternativas}) {

     const [alternativas, setAlternativas] = useState([{pregunta: 1, alternativa: 0},{pregunta: 2, alternativa: 0},{pregunta: 3, alternativa: 0},{pregunta: 4, alternativa: 0},{pregunta: 5, alternativa: 0}]);

     const handleChange = (e) => {
          setAlternativas({
              ...alternativas,
              [e.target.name] : e.target.value
          })
     }

     return (
        <div className="container my-5">
            <div className="row">
                {alternativas.map(x => ( <ExamenRespuesta key={x.pregunta} numeroPregunta={x.pregunta} handleChange={handleChange} /> ))}
            </div>
        </div>
    )
}


function ExamenRespuesta({numeroPregunta, handleChange}) {
    return(
        <div>
            pregunta {numeroPregunta}: 
            <select id={numeroPregunta} name={numeroPregunta} onChange={handleChange} className="form-control">
                <option value="0">vacio</option>    
                <option value="1">a</option>    
                <option value="2">b</option>
                <option value="3">c</option>
                <option value="4">d</option>
                <option value="5">e</option>
            </select>
        </div>
    )
}

I don't know how to bind the to each element of the array. So when you change a value of the select, change the value of the "alternativa" field.

The idea is that the pregunta value of the array is linked to the name property of the select and the alternativa value is linked to the value property of the select.

pregunta ~~ [select control].name
alternativa ~~ [select control].value

Please help. I need an idea of how to achieve this functionality.

Jason · Accepted Answer · 2020-09-21 03:50:07Z

1

Like parktomatomi mentioned if you can change alternativas to an object may be easier to work with.

Otherwise you can do this...

  const handleChange = (e) => {
    const actualSelecciónIndice = alternativas.findIndex(el => {
      return el.pregunta === Number(e.target.name)
    })

    let nuevaAlternativas = [...alternativas]

    if(actualSelecciónIndice) {
      nuevaAlternativas[actualSelecciónIndice].alternativa = Number(e.target.value)
      setAlternativas(nuevaAlternativas)
    }
  }

not the most elegant solution but works :)

answered Sep 21, 2020 at 3:50

Jason

3671 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

parktomatomi · Accepted Answer · 2020-09-21 05:23:30Z

1

If you have control of the data structure of alternativas, you could make it an object where pregunta is the key and alternativa is the value. Then your handleChange function would work as expected.

If alternativas must be an array of objects as it appears in your code, then you can create an updated copy of the array using Array.prototype.map:

const handleChange = (e) => {
    setAlternativas(
        alternativas.map(value => value.pregunta == e.target.name
            ? { ...value, alternativa: e.target.value }
            : value));
}

edited Sep 21, 2020 at 5:23

answered Sep 21, 2020 at 2:29

parktomatomi

4,1191 gold badge18 silver badges21 bronze badges

Collectives™ on Stack Overflow

Update an element of a list of objects in react hooks. Bind an array to a list of select controls

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related