git clone https://github.com/markcrispo/CSFS1010-Lab-1
cd CSFS1010-Lab-1
npm i
npm run dev
You've been hired to code a To Do list app! We'll build it step-by-step.
Create a component called ToDoItem
that renders a checkbox and a text field. The component should track its state with the useState hook. This is an example of a common pattern - a controlled component!
The goal is to drive the inputs with state variables.
const [title, setTitle] = useState('');
const [isChecked, setIsChecked] = useState(false);
Hints:
- You can use
<input type="checkbox" />
and<input type="text" />
for the checkbox and textfield - Use the
onChange
prop to capture change events and callsetTitle
andsetIsChecked
Add a "Save" button beside the text field.
When the user clicks Save...
- replace the text field with regular non-editable text
- replace the Save button with an Edit button
When the user clicks Edit...
- the Save button should reappear
- the text should be editable again.
- the Save button should be disabled when the text field is empty
A designer has taken a look at your progress so far, and they have some feedback:
When the text has been saved, the "Edit" button should only show up when the user is hovering over the task.
Hints:
- You can use the
onMouseEnter
andonMouseLeave
props to capture mouseenter and mouseleave events
Underneath the To-Do list, add an "Add" button and a "Remove" button to add and remove tasks from the bottom of the To-do list.
Hints:
- Add a
useState
to track the number of todos. Add and Remove should increment/decrement the count respectively.
Next, we'll want to be able to remove specific tasks from the To-Do list. To accomplish this, we'll want to lift state
In ToDoItem
:
- Add a "Remove" button, and a
handleRemove
prop - convert the
useState
hooks for the checkbox and text field to props
In App.jsx
:
- Add
const [todos, setTodos] = useState([{ title: 'Get groceries', isChecked: false }])
- Map the
todos
state to the<ToDoItem />
component - Implement functions
setIsChecked
andsetTitle
for a to-do item at a particular index
Once we're done with that refactor, we can implement the remove button:
In ToDoItem
:
- Add a "Remove" button, and a
handleRemove
prop
In App.jsx
:
- Implement
handleRemove
for a to-do item at a particular index