Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
July 28, 2022 07:05 pm GMT

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

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!

Live Preview


Original Link: https://dev.to/this_mkhy/week-8-todo-delete-app-20b5

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To