728x90
반응형
const DefaultSelect = ({
text = "기본 Select",
typeClassName = "",
sizeClassName = "",
isEdit = true,
isNew = false,
...props
}) => {
return (
<div className="selectBox">
<select
disabled={!isEdit} // 수정하는 상태면 비활성화가 풀린다.
className="defaultSelect"
defaultValue={props.defaultValue}
>
{isNew && <option value="" selected hidden></option>} // 새로 만드는 경우에만 빈 값 옵션을 넣었다.
{props.options?.map((option: { value: string; name: string }) => (
<option
className="defaultSelect option"
key={option.value}
value={option.value}
>
{option.name}
</option>
))}
</select>
{isEdit && (
<span className="arrowIcon">
<img src="/img/arrow.svg" />
</span>
)}
</div>
);
};
export default DefaultSelect;
Create 컴포넌트에서 불러올때 isNew={true}로 내려주면 된다.
728x90
반응형
'프론트엔드✏️ > 개인공부' 카테고리의 다른 글
[react-query] 검색 기능 (0) | 2022.09.15 |
---|---|
[react-csv] react 엑셀 파일로 내보내기 (0) | 2022.09.07 |
[공통 컴포넌트,css]글자수 체크하는 Input창, x 초기화 버튼 Input, 테두리 겹치는 부분 (0) | 2022.09.06 |
공통 컴포넌트 만드는 중 (0) | 2022.09.05 |
[react-query] 리액트 쿼리 (0) | 2022.09.01 |