#7.1 To Do List part Two

• map() : array 각각의 element를 바꾸고 싶을때 사용하는 것
  [a,b,c].map()을 하면 각각의 a,b,c에 대해 map안에 적은 함수가 6번 실행됨
  그 함수로부터 return한 어떤 값은 새로운 array에 들어감 

• array를 가져와서 그 array의 item을 변형해서 li가 되도록 한것 

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]);
    setToDo("");
  };
  console.log(toDos);
  console.log(toDos.map((item, index) => <li key={index}>{item}</li>))
  return (
    <div>
      <h1>My To Dos ({toDos.length})</h1>
      <form onSubmit={onSubmit}>
        <input onChange={onChange} value={toDo} type="text" placeholder="Write your to do.." />
        <button>Add To Do</button>
      </form>
      <hr />
      <ul>
        {toDos.map((item, index) => <li key={index}>{item}</li>)}
      </ul>
    </div>
  );
}

export default App;