React Select(react-select)でOptionを改行して表示する方法

公開日:

更新日:

React Selectに関して

今回はReact Selectを使用してOptionの中身を改行して表示させます。(言語はJavascriptです)

デモ:

方法:formatOptionLabelというプロップスを利用する

App.js

1import "./styles.css";
2import React from "react";
3import Select from "react-select";
4import { useState } from "react";
5
6export default function App() {
7  const [value, setValue] = useState("");
8  const handleChange = (value) => {
9    setValue(value);
10  };
11
12  const formatOptionLabel = ({ name, age, job }) => (
13    <div>
14      <div>{name}</div>
15      <div>{age}</div>
16      <div>{job}</div>
17    </div>
18  );
19
20  const options = [
21    {
22      name: "Mike",
23      age: 20,
24      job: "engineer",
25    },
26    {
27      name: "Bob",
28      age: 25,
29      job: "sales",
30    },
31  ];
32
33  return (
34    <div className="App">
35      <Select
36        value={value}
37        onChange={handleChange}
38        getOptionValue={(option) => option["name"]}
39        getOptionLabel={(option) =>
40          option["name"] + option["age"] + option["job"]
41        }
42        options={options}
43        formatOptionLabel={formatOptionLabel}
44        components={{
45          IndicatorSeparator: () => null,
46        }}
47      />
48    </div>
49  );
50}
51

ポイントは下記になります

・optionsで渡す選択肢はオブジェクトにする

formatOptionLabelの引数にオブジェクトのプロパティを渡す

※参考にさせて頂いた記事

・react-selectのカスタマイズでつまづいた点まとめ(style中心)

・【React-Select】label と value をカスタマイズする)

以上、React SelectでOptionを改行するTipsでした。

お役に立てましたら幸いです。

ご一読頂き、ありがとうございました。