import { useState } from "react";
import "./styles.css";
export default function App() {
const selectList = ["select", "sample1", "sample2"];
const [options, setOptions] = useState([]);
const onChange = (e) => {
if (!options.includes(e.target.value) && e.target.value !== "select") {
setOptions((options) => [...options, e.target.value]);
}
};
return (
<div className="App">
<select onChange={onChange}>
{selectList.map((item) => (
<option value={item} key={item}>
{item}
</option>
))}
</select>
{options.map((each, i) => {
return <div key={i}>{each}</div>;
})}
</div>
);
}
반응형
'Frontend > React' 카테고리의 다른 글
React jsx안에서 `${}`쓰고싶을때 (0) | 2023.03.27 |
---|---|
Context API _context undefined 에러 (0) | 2023.01.08 |
nextjs Link태그에 _blank (0) | 2022.06.10 |
브라우저단 에러 error - FetchError: request to http://localhost:8000/main failed, reason: connect ECONNREFUSED 127.0.0.1:8000 (0) | 2022.05.23 |
Component Life cycle (0) | 2022.05.22 |