react-datepicker를 사용한 todolist에 대한 질문

안녕하세요~ 요구사항이 "각 Todo 항목 마다 종료일을 띄워주고 수정하기"라고 생각했을때, https://www.npmjs.com/package/react-datepicker의 예시를 봤을때는 모든 todo 항목 옆에다가 datepicker를 만들어줘서 수정하게끔하는게 가장 직관적인 방법 중 하나인 것 같습니다. import { useState } from "react"; import DatePicker from "react-datepicker"; import "react-datepicker/dist/react-datepicker.css"; import './App.css'; const MyDatePicker = ({date, onChange}) => { return <DatePicker selected={date} onChange={onChange} />; } const TodoItem = ({todo}) => { const [state, setState] = useState(todo.state); const [content, setContent] = useState(todo.content); const [date, setDate] = useState(todo.date); return <div> <input type="checkbox" checked={state === 'done'} onChange={() => { setState(state === 'done' ? 'pending' : 'done'); }}/> <input value={content} onChange={(e) => { setContent(e.target.value); }}/> <MyDatePicker date={date} onChange={(date) => setDate(date)}/> </div> } function App() { const [todos, setTodos] = useState([]); return ( <div className="App"> <button onClick={() => setTodos(prev => { return [ ...prev, { state: 'pending', content: '', date: new Date(), } ] })}>Add Todo</button> {todos && todos.map(todo => <TodoItem key={`${todo.content}-${todo.date}`} todo={todo}/>)} </div> ); } export default App; 이런 느낌이지 않을까 싶네요.