/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

0 vote246 views1 answer
Assign random colors react chartjs
Javascript React
0 vote274 views1 answer
Export socket io connection in react
Javascript React
32 votes231 views1 answer
React-router react-router-dom
Javascript React
1 vote262 views1 answer
@react-google-maps/api npm
Javascript React
0 vote241 views1 answer
React fetch request with content type x-www-form-urlencoded
Javascript React
4 votes255 views1 answer
React useeffect not on first render
Javascript React
0 vote267 views1 answer
Form.select not working react bootstrap
Javascript React
0 vote210 views2 answers
Install react webpack
Javascript React
1 vote262 views2 answers
Shadow on view in react natice
Javascript React
0 vote245 views1 answer
Which react-bootstrap component you will use for width: 100% across all viewport and device sizes
Javascript React