Breaking News: Grepper is joining You.com. Read the official announcement!

react select with custom option

HossAzadi answered on April 18, 2020 Popularity 10/10 Helpfulness 4/10

answer react select with custom option

react select with custom option

Comment

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"));

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: stackoverflow.com

Tags: javascript react-select

Link to this answer
Share Copy Link

Contributed on Apr 18 2020

HossAzadi

0 Answers Avg Quality 2/10

react select with custom option

Contents

More Related Answers

react select with custom option

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.