• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
    • Questions
    • Teachers
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

138
Views
Reaccionar obtener valor del menú desplegable de selección rellenado desde la API

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)

over 2 years ago · Juan Pablo Isaza
3 answers
Answer question

0

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

over 2 years ago · Juan Pablo Isaza Report

0

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> ); }
over 2 years ago · Juan Pablo Isaza Report

0

¿Puede confirmar que el atributo de valor en la etiqueta de opción está configurado correctamente y tiene el valor que desea que tenga?

over 2 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error