The cities data is coming from an Api cityOptions is being logged to the console, but when I try to show it in the UI in a dropdown, no data shows.

const cityOptions = cities?.map((city) => ({
    value: city.id.toString(),
    label: city.name,
  })) || [];
  console.log("cityoptions", cityOptions)

<Select
  name="city"
  placeholder="Cities"
  value={city || null}
  maw={200}
  size="md"
  data={isLoading ? []: cityOptions}
  disabled={isLoading}
  onChange={(value) => setCity(value as string)}
  icon={<IconSelector size={18} stroke={1.75} />}
  clearable
  style={{ marginBottom: 0 }}
/>

The cities data is coming from an Api cityOptions is being logged to the console, but when I try to show it in the UI in a dropdown, no data shows.

const cityOptions = cities?.map((city) => ({
    value: city.id.toString(),
    label: city.name,
  })) || [];
  console.log("cityoptions", cityOptions)

<Select
  name="city"
  placeholder="Cities"
  value={city || null}
  maw={200}
  size="md"
  data={isLoading ? []: cityOptions}
  disabled={isLoading}
  onChange={(value) => setCity(value as string)}
  icon={<IconSelector size={18} stroke={1.75} />}
  clearable
  style={{ marginBottom: 0 }}
/>

• javascript
• typescript
• mantine

• A follow-up discussion was started:

  “A minimal, reproducible example would be helpful to diagnose this Mantine Select issue.” Join the conversation

• Please add a specific question to improve the post. So far there is no direct question. – chux Commented Apr 1 at 0:41

1 Answer 1

As the documentation states, there is no props called icon; there is checkIconPosition and the property is right/left. You are using icon , which may be causing the issue. Please visit this documentation [https://mantine.dev/core/select/?t=props] Please update your code by following code,

  const cityOptions = cities?.map((city) => ({
    value: city.id.toString(),
    label: city.name,
  })) || [];
  
  console.log("cityoptions", cityOptions);
  console.log("isLoading:", isLoading);

  return (
    <Select
      name="city"
      placeholder="Cities"
      value={city}
      maw={200}
      size="md"
      data={cityOptions}
      disabled={isLoading}
      onChange={(value) => setCity(value)}
      leftSection={<IconSelector size={18} stroke={1.75} />}
      clearable
      nothingFound="No cities found"
      style={{ marginBottom: 0 }}
    />
  );
};