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でした。
お役に立てましたら幸いです。
ご一読頂き、ありがとうございました。