Posted on Jul 28, 2022

Week 8 - Todo-Delete App

Welcome to Week 8 of React Curve

Hello developer!, glad to see you again.

This is a react-curve, open source project where I can share and start creating small UI components in the way I understood the concepts to build large scale projects .

Todo-Delete App

This week we created a todo-delete app. An app that allows user to add any tasks in a form and delete that task from the list in react.

To create a Todo-Delete component; We have to :

Create three components, the parent TodoDeleteV2, ItemForm and PrintItems child components.
In the parent TodoDeleteV2 component :
- Create a state that stores the lists and function to update what’s on the screen in response to submit button.
- In handleAddItem method, when we want to update an array stored in state, we need to make a copy of an existing one, and then set state to use the new array.
- In handleDeleteItem method, we filter our list items and return all the list items except the once that was removed when clicked.
- Send handleAddItem method to ItemForm component and send handleDeleteItem method and lists to PrintItems component as props.
In the child ItemForm component :
- Create a state that stores the item and function that handles updates in response to a change input and submit button.
- We handleInputChange and submit when a user interacts with the form.
Finally, In the child PrintItems component :
- We just map to render the list of items.
- For each list item, print the name of the item and Delete button to delete that item.

Code

TodoDeleteV2 Component

import React, {useState} from 'react'; import ItemForm from './ItemForm'; import PrintItems from './PrintItems'; const TodoDeleteV2 = () => { const [lists, setLists] = useState([]) const handleAddItem = (item) => { item.id = lists.length + 1 setLists([...lists, item]) } const handleDeleteItem = (id) => { setLists(lists.filter((item) => item.id !== id)) } return ( <div> <h2>Delete from Todo</h2> <ItemForm addItem={handleAddItem} /> <PrintItems lists={lists} deleteItem={handleDeleteItem}/> </div> ); } export default TodoDeleteV2;

ItemForm Component

import React, {useState} from 'react'; const ItemForm = (props) => { const initialFormState = { id: null, name: '' } const [item, setItem] = useState(initialFormState) const handleInputChange = (ev) => { const { name, value } = ev.target setItem({ ...item, [name]: value }) } const handleSubmit = (ev) => { ev.preventDefault() if (!item.name) return props.addItem(item) setItem(initialFormState) } return ( <> <form onSubmit={handleSubmit}> <label>Enter Item</label> <br /> <input type="text" name="name" value={item.name} onChange={handleInputChange} /> <br /> <button>Add new item</button> </form> </> ); } export default ItemForm;

PrintItems Component

import React from 'react'; const PrintItems = (props) => { return ( <div> {props.lists.length > 0 ? ( props.lists.map((item) => ( <ul key={item.id}> <li>{item.name}</li> <button onClick={() => props.deleteItem(item.id)}> Delete </button> </ul> )) ) : ( <div> No items </div> )} </div> ); } export default PrintItems;