An Interest In:
Web News this Week
- March 19, 2024
- March 18, 2024
- March 17, 2024
- March 16, 2024
- March 15, 2024
- March 14, 2024
- March 13, 2024
July 28, 2022 07:05 pm GMT
Original Link: https://dev.to/this_mkhy/week-8-todo-delete-app-20b5
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 whats 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;
Conclusion
Thank you for reading and any contribution is more than welcome in the threads below!
Original Link: https://dev.to/this_mkhy/week-8-todo-delete-app-20b5
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To