Tengo una variedad de objetos.
let arr= [0: {received: "Return Received", approved: "Approved", rejected: "Rejected"} 1: {authorized: "Authorized", received: "Return Received"}} Quiero enviar datos a <option></options>
donde el primer conjunto debe hacer un conjunto de opciones como el primer conjunto crear y la opción y la segunda opción siguiente cuando se ejecuta en bucle
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>Probé el siguiente código pero estoy obteniendo todos los resultados en una sola opción
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>
Debería crear un <select> por clave, pero solo está creando uno en total. Prueba algo como esto:
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> ));Aquí hay una caja de arena: https://codesandbox.io/s/bitter-feather-emizf
También es un poco extraño que esté llamando a arr una matriz y diga que está push datos en ella, pero luego usa Object.entries y lo que parece ser una sintaxis de objetos para ello. De todos modos, asumí que es un objeto de arriba. En caso de que esté atascado en el aspecto de la matriz, también agregué una estructura de matriz:
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> ));