Week 8 - Todo-Delete App
Tags: react, hook, usestate, events
Published: 2022-07-28 19:05:46

---
title: Week 8 - Todo-Delete App
published: true
description: creating small UI component to build large scale projects
tags: reactjs, hook, useState, events
cover_image: https://i.imgur.com/RBla91e.jpg
key: 1
series: React Curve
---

## 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](https://i.imgur.com/HULWJgW.gif)
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
```react
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

```react
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

```react
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](https://this-react-curve.vercel.app/todo-delete-v2)