How do I display multiple attributes for each option in an Async Select?

[ag288]

Hi! So I'm using the AsyncSelect component and was just wondering if its possible to display the name and the phone number of each row returned in the loadOptions. The use case is as follows : there may be many patients with the same name, and displaying the phone number alongside each name will help in identifying the correct patient. However, the selected value should only be the name, and not the name and phone number

Like as shown below :

But when the user selects the value only the name should get filled in the field.
Thanks!

[csandman]

Sure I can help with that! My answer to this is very similar to my answer for #41 so check that one out for more info.

The easiest way to accomplish this is by customizing the Option component to display both fields. This example will be using the normal Select but the same should apply for the AsyncSelect.

Also I'm not exactly sure what the structure of your data is so this will be a start anyway:

import { useState } from "react";
import { FormControl, FormLabel } from "@chakra-ui/react";
import { Select, chakraComponents } from "chakra-react-select";

const people = [
  {
    label: "Candice Farrell Sr.",
    phone: "(874) 259-6856",
    value: "vUbGPcOSzSI4PMX7Vewd-"
  },
  // ...rest of people
  {
    label: "Denise Dach",
    phone: "436-519-3195",
    value: "JE0n67tQmsZlHdRKy8Msh"
  }
];

const customComponents = {
  Option: ({ data, ...props }) => (
    <chakraComponents.Option data={data} {...props}>
      {data.label} - {data.phone}
    </chakraComponents.Option>
  )
};

const App = () => {
  const [selectedPerson, setSelectedPerson] = useState(null);

  return (
    <FormControl p={4}>
      <FormLabel>Patient Name</FormLabel>
      <Select
        name="patient"
        value={selectedPerson}
        onChange={setSelectedPerson}
        options={people}
        components={customComponents}
        placeholder="Select a person"
      />
    </FormControl>
  );
};

And here's a demo:

• TypeScript: https://codesandbox.io/s/chakra-react-select-multiple-fields-shown-in-option-ts-q2etz5?file=/app.tsx
• Vanilla JS: https://codesandbox.io/s/chakra-react-select-multiple-fields-shown-in-option-js-94h0dj?file=/example.js

It's important to not that the actual value that will be saved in state is the entire person object, so make sure to extract the name when submitting the form if that's all you want. However, doing it this way allows you to keep the name and phone number separated so pulling the name out at the end should be trivial.

---

Let me know if you need any further help!