reactjsmantine

Mantine - [@mantine/core] Each option must have value property


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>

Solution

  • 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}`],
              },
            ])
          }
        />