Ant Design Dynamic Data does not binds to Select - reactjs

Question

I am using react for a school project. The dynamic data does not binds to Options from Ant Design, react js. The result is an empty option list. In actual the data comes from an external API. For testing purpose I assigned the data the state variable. The data comes in 2D array, so I am mapping through the data twice.
Result is:
import { useEffect, useState } from "react";
import { Select } from "antd";
const { Option } = Select;
const Complete = () => {
const [list, setPersons] = useState([
[
{
id: 1,
personName: "Owan",
},
{
id: 2,
personName: "More",
},
{
id: 3,
personName: "Jaila",
},
{
id: 4,
personName: "Eerov",
},
],
[
{
id: 5,
personName: "Rell",
},
{
id: 6,
personName: "Juko",
}
]
]);
useEffect(() => {
console.log(list);
}, []);
return (
<Select
showSearch
style={{ width: 200 }}
placeholder="Select a person"
optionFilterProp="children"
filterOption={(input, option) =>
option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
{list.map((l) => {
l.map((person) => {
console.log(person);
<Option value={person.id}>
{person.personName}
</Option>;
});
})}
</Select>
);
};
export default Complete;

Answer 1

You just needed to update small one using ES6 feature here the script to combine 2 dimensional array to single array
{[].concat(...list).map((l) => <Option value={l.id}>{l.personName}</Option>)}
Here the full script:
import { useEffect, useState } from "react";
import { Select } from "antd";
const { Option } = Select;
const Complete = () => {
const [list, setPersons] = useState([
[
{
id: 1,
personName: "Owan",
},
{
id: 2,
personName: "More",
},
{
id: 3,
personName: "Jaila",
},
{
id: 4,
personName: "Eerov",
},
],
[
{
id: 5,
personName: "Rell",
},
{
id: 6,
personName: "Juko",
}
]
]);
useEffect(() => {
console.log(list);
}, []);
return (
<Select
showSearch
style={{ width: 200 }}
placeholder="Select a person"
optionFilterProp="children"
filterOption={(input, option) =>
option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
{[].concat(...list).map((l) => <Option value={l.id}>{l.personName}</Option>)}
</Select>
);
};
export default Complete;
visit live example demo

Answer 2

Try with the following code:
import { useEffect, useState } from "react";
import { Select } from "antd";
const { Option } = Select;
const Complete = () => {
const [list, setPersons] = useState([
[
{
id: 1,
personName: "Owan"
},
{
id: 2,
personName: "More"
},
{
id: 3,
personName: "Jaila"
},
{
id: 4,
personName: "Eerov"
}
],
[
{
id: 5,
personName: "Rell"
},
{
id: 6,
personName: "Juko"
}
]
]);
useEffect(() => {
console.log(list);
}, [list]);
return (
<Select
showSearch
style={{ width: 200 }}
placeholder="Select a person"
optionFilterProp="children"
filterOption={(input, option) =>
option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
{list.map((l) => (
<>
{l.map((person) => (
<Option value={person.id}>{person.personName}</Option>
))}
</>
))}
</Select>
);
};
export default Complete;