Tengo un componente selecto:
<Select}> {data && data.map((survey) => ( <Option key={survey.id} value={survey.id}> {survey.name} </Option> )) } </Select>La matriz de datos proviene de una obtención de API mediante axios, que luego se guarda en los datos de estado:
const [data, setData] = useState([]);¿Cómo tomo el valor seleccionado y lo muestro?
Intenté agregar un controlador onChange al componente y guardar e.target.value en un estado separado:
onChange={e => setInput(e?.target?.value)} Sin embargo, recibo un error de que el value no está undefined . Sospecho que es porque los datos aún no se han cargado.
¿Cómo obtiene el valor seleccionado de las opciones cuando las opciones provienen de una API? (es decir, menú desplegable dinámico)
Prueba así:
const [data, setData] = useState([]); const handleChange = (e) => { console.log(e.target.value); setData(e.target.value); }; <select onChange={handleChange}> {dataArr && dataArr.map((survey) => ( <option key={survey.id} value={survey.id}> {survey.name} </option> ))} </select>Ejemplo : Ejemplo
Debe definir un nuevo estado y configurarlo en el controlador onChange para mostrar los datos seleccionados en otro lugar.
Defínalo como:
const [selectedValue,setSelectedValue] = useState()Luego, configúralo:
const handleChange = (e) => { setSelectedValue(e.target.value) }ahora está disponible para usar en cualquier parte de este componente.
Aquí hay un ejemplo:
import React, { useState, useEffect } from 'react'; export default function App() { const [data, setData] = useState([]); const [selectedValue,setSelectedValue] = useState() // this useEffect is just a simulator for api response, you do not need this useEffect, // instead just call your api and set the data with your awaited response useEffect(()=>{ setTimeout(()=> { setData([ { name: 'first Option', id: 'ID of first option'}, { name: 'Second Option', id: 'ID of second option' } ]) },[2000]) },[]) const handleChange = (e) => { console.log(e.target.value); // maybe print the value to check setSelectedValue(e.target.value) } return (<div> <select onChange={handleChange}> {data && data.map((survey) => ( <option key={survey.id} value={survey.id}> {survey.name} </option> ))} </select> {selectedValue ? <div>Selected value: {selectedValue} </div> : ''} </div> ); }¿Puede confirmar que el atributo de valor en la etiqueta de opción está configurado correctamente y tiene el valor que desea que tenga?