[리액트 React] value를 react-select에 반영하는 방법/react-select value를 지정해주는 방법/How to assign value to react-select

 

안녕하세요.

디자인도 하고, 개발도 하는 '디자인 뚝딱'입니다.

 

이번 포스팅에서는 react-select를 사용할 때 value를 지정해주는 방법에 대해 다루겠습니다.

혹은 선택한 value를 react-select에 반영하는 방법입니다.

혹은 react-select 상태를 바꾸는 방법입니다.

 

저는 react로 개발할 때 selectbox를 사용해야 될 상황이 되면

거의 react-select 라이브러리를 사용합니다.

style도 심플해서 만족스러워요.

 

이전에 올렸던 react-select 관련 포스팅도 참고하세요 :)

[ react-select 초기화 하는 방법 ]

[리액트 React] react-select 초기화 / How to initialize react-select / How to reset re

[ react-select option 만드는 방법 ]

[리액트 React] select option 만들기 / select value 가져오기 / How to create select options / How to get value from sel

 

 

  value를 react-select에 반영하는 방법/react-select value를 지정해주는 방법 

import React, {useState} from 'react';
import Select from "react-select";

let selectOptions = [
    {value: "use", label: "사용"},
    {value: "unused", label: "미사용}
];

export const Example = () => {
    const [selectedValue, setSelectedValue] = useState("use");

    return (
        <Select
            className="selectItem"
            onChange={(e) => setSelectedValue(e.value)}
            options={selectOptions}
            placeholder="유형 선택"
            value={selectOptions.filter(function (option) {
            	return option.value === selectedValue;
            })}
        />
    )
}

export default Example;