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>
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>
));