/Javascript/React/React select with custom option

React select with custom option

import React from "react";
import ReactDOM from "react-dom";
import Select from "react-select";

const options = [
  { value: "Abe", label: "Abe", customAbbreviation: "A" },
  { value: "John", label: "John", customAbbreviation: "J" },
  { value: "Dustin", label: "Dustin", customAbbreviation: "D" }
];

const formatOptionLabel = ({ value, label, customAbbreviation }) => (
  <div style={{ display: "flex" }}>
    <div>{label}</div>
    <div style={{ marginLeft: "10px", color: "#ccc" }}>
      {customAbbreviation}
    </div>
  </div>
);

const CustomControl = () => (
  <Select
    defaultValue={options[0]}
    formatOptionLabel={formatOptionLabel}
    options={options}
  />
);

ReactDOM.render(<CustomControl />, document.getElementById("root"));

Source: stackoverflow.com

Similar codes

3 votes131 views1 answer
Could not resolve dependency: npm ERR! peer react@"^16.0.0" from [email protected]
Javascript React
0 vote143 views3 answers
Redirect is not defined react/jsx-no-undef
Javascript React
1 vote133 views1 answer
React router dom 6 go back
Javascript React
0 vote121 views1 answer
React event for modals
Javascript React
0 vote109 views1 answer
React native firebase email verification
Javascript React
0 vote115 views1 answer
Why is necessary to run react-native run
Javascript React
1 vote123 views1 answer
Tailwind css react craco package.json
Javascript React
0 vote124 views1 answer
Export app react native
Javascript React
0 vote73 views2 answers
A function whose declared type is neither 'void' nor 'any' must return a value.
Javascript React
2 votes122 views2 answers
Unable to resolve module react-navigation
Javascript React