How to change mapping option label/value to id/name

[abinhho]

Thank you for your nice contribution.

Default option type is

{
   value: "coffee",
   label: "Coffee",
}

But I want to use like this

{
   id: "coffee",
   name: "Coffee",
}

How can I do that?

[joao-salomao]

@abinhho you can use the props getOptionLabel and getOptionValue from react select

[csandman]

@joao-salomao Thanks for helping out here, and you're spot on.

Here's a full example using getOptionLabel and getOptionValue

import { Select } from "chakra-react-select";

const options = [
  { id: "vanilla", name: "Vanilla" },
  { id: "chocolate", name: "Chocolate" },
  { id: "strawberry", name: "Strawberry" },
  { id: "salted-caramel", name: "Salted Caramel" }
];

const Example = () => (
  <Select
    isMulti
    name="flavors"
    options={options}
    placeholder="Select some flavors..."
    getOptionLabel={({ name }) => name}
    getOptionValue={({ id }) => id}
  />
);

export default Example;

CodeSandbox Link: https://codesandbox.io/s/chakra-react-select-custom-label-and-value-qn8je?file=/example.js