[React] todo

App.js

import {useEffect, useState} from "react";

function App() {
  const [toDo, setToDo] = useState(""); //입력값
  const [toDos, setToDos] = useState([]); //todo 리스트
  const onChange = (event) => setToDo(event.target.value);
  const onSubmit = (event) => {
    event.preventDefault();
    if(toDo==="") {
      return;
    }
    setToDos((currentArr) => [toDo, ...currentArr]); //배열에 입력된거 추가하고
    setToDo("");
  };
  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>
        <hr />
          <ul>
            {toDos.map((item, index) => (
              <li key={index}>{item}</li>
            )
            )}
          </ul>
      </form>
    </div>
  );
}
export default App;

 

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);