[React 기초] todo list 만들기

todo 입력받기

import { useEffect, useState } from "react";

function App() {
  const [toDo, setToDo] = useState("");
  const [toDos, setToDos] = useState([]);
  const onChange = (event) => setToDo(event.target.value);
  const onSubmit = (event) => {
    event.preventDefault();  //기본동작 제어
    if (toDo === "") {
      return;
    }
    setToDos((currentArray) => [toDo, ...currentArray]); // state를 직접 수정할 수는 없음
    setToDo("");
  };
  return (
    <div>
      <h1>My To Dos({toDos.length})</h1>
      <form onSubmit={onSubmit}>
        <input
          value={toDo}
          onChange={onChange}
          type="text"
          placeholder="enter ToDo"
        ></input>
        <button>Submit</button>
      </form>
      <hr />
      <!--map함수를 이용하여 todo리스트 출력-->
      <ul>
        {toDos.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

 

 

[ a, b, c ...].map( (item) => item.toUpperCase() )