React
#7.0 To Do List part One
김예나
2023. 3. 10. 23:50
- array를 직접적으로 수정하지 않으면서 setToDos로 array에 element를 추가하는 방법
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);
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을 submit*/}
</form>
</div>
);
}
export default App;