react-selectのサンプル

nextjs-react-select.tsx

'use client';
import {useState} from "react";
import Select from "react-select";

const options = [
    {value: "line", label: "折れ線グラフ"},
    {value: "bar", label: "棒グラフ"},
    {value: "pie", label: "円グラフ"},
];

export default function Demo() {
    const [selectedValue, setSelectedValue] = useState(options[0]);

    return (
        <div>
            <div style={{width: "600px", margin: "50px"}}>
                <Select
                    options={options}
                    defaultValue={selectedValue}
                    onChange={(value:any) => {
                        value ? setSelectedValue(value) : null;
                    }}
                />
            </div>
            <div>{selectedValue.value}</div>
            <div>{selectedValue.label}</div>
        </div>
    )
}