Tengo una matriz de objetos que contienen propiedades de su tamaño y cantidad (FE: {tamaño: "Grande", cantidad: 10}). Quiero que el usuario pueda seleccionar cualquier tamaño disponible en el formulario y luego almacenarlo en useState. Para ser honesto, hago algo así por primera vez y, lamentablemente, mi código no funciona. Recibo errores de basillion que comienzan con "el evento no está definido". Estoy pegando mi código a continuación:
const handleChange = (event) => { setChosenSize(event.target.value) } const choseSize = (array) => { return (<> <form> <label>Choos your size:</label> <select onChange={() => handleChange()}> {array.map((object) => { return ( <option value={object.size}>{object.size}: {object.quantity}</option> ) })} </select> </form> </>) } console.log(chosenSize)Está ejecutando la función sin pasar nada dentro de ella, por lo que el event será indefinido o nulo. Lo siguiente debería solucionar su problema:
const handleChange = (event) => { setChosenSize(event.target.value) } const choseSize = (array) => { return (<> <form> <label>Choos your size:</label> <select onChange={(event) => handleChange(event)}> {array.map((object) => { return ( <option value={object.size}>{object.size}: {object.quantity}</option> ) })} </select> </form> </>) } console.log(chosenSize)o puedes hacer lo siguiente (que prefiero)
const handleChange = (event) => { setChosenSize(event.target.value) } const choseSize = (array) => { return (<> <form> <label>Choos your size:</label> <select onChange={handleChange}> {array.map((object) => { return ( <option value={object.size}>{object.size}: {object.quantity}</option> ) })} </select> </form> </>) } console.log(chosenSize)