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;
Conclusion
Thank you for reading and any contribution is more than welcome in the threads below!
Top comments (0)