• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

122
Vistas
¿Cómo acceder a los valores de datos usando Map Function?

Tengo un estado de "datos" que almacena los valores tomados de mi base de datos.

 const [data, setData] = useState([]);

"datos" contiene una serie de objetos que se extrajeron de mi base de datos.

 // so data is essentially (if I console.log it): data = [ {student:"Jeff",country:"London"}, {student:"Benjamin",country:"France"}, {student:"Franklin",country:"USA"} ];

Estoy usando React Select para mostrar las etiquetas de estos datos (solo quiero datos de "estudiantes"), pero no estoy seguro de cómo asignar estos datos a valores y etiquetas para ponerlos como opciones en mi componente React Select. He intentado lo siguiente pero me da error.

 import Select from "react-select"; function myTable() { const myOptions = data.map(info => { value: {info.student}, label: {info.student} }); return ( <tr> <td> <Select isMulti options={myOptions}></Select> </td> </tr> ) };

Quiero que mis opciones contengan valores y etiquetas de mi objeto de estado de datos.

about 3 years ago · Santiago Gelvez
2 Respuestas
Responde la pregunta

0

No necesita agregar info.student en un objeto.

 import Select from "react-select"; function myTable() { const myOptions = data.map(info => ({ value: info.student, label: info.student })); return ( <tr> <td> <Select isMulti options={myOptions}></Select> </td> </tr> )

Ejemplo de Codesandbox

about 3 years ago · Santiago Gelvez Denunciar

0

Tiene un error de sintaxis con su función Array.prototype.map . Debería ser:

 const myOptions = data.map(info => ({ value: info.student, label: info.student })); // or const myOptions = data.map(info => { return { value: info.student, label: info.student } });
about 3 years ago · Santiago Gelvez Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda