(react)ToDoList 만들기

• select 사용하기

import React, { useState } from "react";
import "./styles.css";

function SelectExample() {
  const [choice, setChoice] = useState("apple");

  const fruits = ["apple", "orange", "pineapple", "strawberry", "grape"];
  const options = fruits.map((fruit) => {
    return <option value={fruit}>{fruit}</option>;
  });
  console.log(choice);
  const handleFruit = (event) => {
    //TODO : select tag 가 정상적으로 작동하도록 코드를 완성하세요.
  };

  return (
    <div className="App">
      <select onChange={handleFruit}>{options}</select>
      <h3>You choose "{choice}"</h3>
    </div>
  );
}

export default SelectExample;

//fruits 배열의 각 요소에 대해 <option> 요소를 생성하고, 
해당 요소의 값을 각 과일로 설정하는 코드입니다.
//options 배열은 나중에 <select> 요소의 내용으로 사용되어 
선택할 수 있는 옵션들을 나타냅니다.

• input checkbox 사용하기