After going through documentation and examples, I am unable to understand why when I provide the value to each option, I still get error stating Each Option must have a value property. Any help is appreciated
If I remove companies && companies.map((company: Company) =>
I am able to see the value as expected, I dont understand why adding logic breaks it.
<AppShell.Main>
<Container size="md">
<Autocomplete
placeholder="Pick value or enter anything"
data={
companies &&
companies.map((company: Company) => [
{
value: "Rick",
group: "Used to be a pickle",
items: ["a", "b"],
},
{
value: "Morty",
group: "Never was a pickle",
items: ["v", "c"],
},
{
value: "Beth",
group: "Never was a pickle",
items: ["d", "de"],
},
{
value: "Summer",
group: "Never was a pickle",
items: ["af", "bf"],
},
])
}
/>
</Container>
</AppShell.Main>
For anyone who runs into the error. The solution is to use flatMap so that you can provide it one single array object
<Autocomplete
placeholder="Pick value or enter anything"
data={
companies &&
companies.flatMap((company: Company) => [
{
value: company.companyId,
group: company.sector,
items: [`${company.name} - ${company.ticker}`],
},
])
}
/>