DEV Community

Cover image for Week 8 - Todo-Delete App
Mohamed Khaled Yousef
Mohamed Khaled Yousef

Posted on

2 1

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 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; 
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

Conclusion

Thank you for reading and any contribution is more than welcome in the threads below!

Live Preview

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

πŸ‘‹ Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay