[react] react에서 <select> 사용하기 예시소스

 

<select className="w150" onChange={handleChangeSelect} value={'4'}>
  <option value="1" >0.1톤</option>
  <option value="2">0.2톤</option>
  <option value="3">0.3톤</option>
  <option value="4">0.4톤</option>
  <option value="5">0.5톤</option>
</select>

export default function App() {
  const selectList = ["apple", "banana", "grape", "orange"];
  const [Selected, setSelected] = useState("");

  const handleSelect = (e) => {
    setSelected(e.target.value);
  };

  return (
    <div className="App">
      <h1>Select in React</h1>
      <div>
        <select onChange={handleSelect} value={Selected}>
          {selectList.map((item) => (
            <option value={item} key={item}>
              {item}
            </option>
          ))}
        </select>
        <hr />
        <p>
          Selected: <b>{Selected}</b>
        </p>
      </div>
    </div>
  );
}