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

0

71
Vistas
Select loop react js with array of objects

I have an array of objects

let arr= [0: {received: "Return Received", approved: "Approved", rejected: "Rejected"} 1: {authorized: "Authorized", received: "Return Received"}}

I want to push data into <option></options>

where first set should make an option set like fist set create and option and second next option when executing in loop

ex :

<Select><option key="received" >Return Received</options<option key="approved">Approved</options><option key="rejected">Rejected</options><Select>

<Select><option key="authorized" >Authorized</options><option key="received">ReturnReceived</options><Select>

I tried the below code but im getting all result in single option

const listItems = Object.entries(arr).map(([key, value]) => (
        console.log(Object.keys(arr[0]).length),
        Object.entries(value).map(([name, data]) => (
            <option key={name}>{name}</option>
        ) 
        )
    )
    );

<Select native={true}>{listItems}<Select>

almost 3 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

You should be creating one <select> per key, but you're only creating one in total. Try something like this:

  const obj = {
    0: {
      received: "Return Received",
      approved: "Approved",
      rejected: "Rejected"
    },
    1: {
      authorized: "Authorized",
      received: "Return Received"
    }
  };

  const listItems = Object.entries(obj).map(([key, value]) => (
    <select key={key}>
      {Object.entries(value).map(([name, data]) => (
        <option key={name}>{name}</option>
      ))}
    </select>
  ));

Here's a sandbox: https://codesandbox.io/s/bitter-feather-emizf

It's also a little weird that you're calling arr an array and you say you're pushing data into it, but then using Object.entries and what seems like object syntax for it. Anyway, I assumed it's an object above. Just in case you're stuck on the array aspect, I added an array structure too:

  const arr = [
    {
      received: "Return Received",
      approved: "Approved",
      rejected: "Rejected"
    },
    {
      authorized: "Authorized",
      received: "Return Received"
    }
  ];

  const arrList = arr.map((value, index) => (
    <select key={index}>
      {Object.entries(value).map(([name, data]) => (
        <option key={name}>{name}</option>
      ))}
    </select>
  ));
almost 3 years ago · Juan Pablo Isaza 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