Beginners' friendly Grocery List App in ReactJS

If you have recently started learning ReactJS then you might be building simple and beginners' App to practice the concepts.To do list App is the one which will come in your mind first.So let us build one.You can refer to official React Docs on https://reactjs.org/ for basic concepts and my previous blog to refer to other React tutorials.

Open your VS Code or the one you are using.
Type the below command in your terminal to create react app.

npx create-react-app grocerylist

Then to change the directory:

cd grocerylist 

Then,start the server:

npm start 

The below window will open in your browser at http://localhost:3000/.

Let us plan what we want to build first and then execute it step by step.
1.First we will create an input type to enter the item.
2.Button to submit the item.
3.A list to display the items along with the functionality to delete and mark it complete.

Please go through the concepts of React Hooks,how to create basic forms in React,Arrays,Object,Arrow functions,spread operator,props.

Now let us edit the code in file App.js.Here we are going to use Functional components using useState() to define the states.

Create below form:

 <form onSubmit={handleSubmit}>
        <input type="text" value={item} onChange={handleChange} />
        <button type="submit">ADD</button>
      </form>

The full code after creating the form is:

import React, { useState } from "react";
import "./App.css"
import { v4 as uuidv4 } from "uuid";

function App() {
  const [item, setItem] = useState("");
  const [list, setList] = useState([]);

  const handleSubmit = (e) => {
    const newItem = {
      id: uuidv4(),
      item: item,
      complete: false,
    };
    e.preventDefault();
    if (item) {
      setList([...list, newItem]);
      setItem("");
    }
  };

  const handleChange = (e) => {
    setItem(e.target.value);
  };

  return (
    <div className="App">
      <h1>Grocery List</h1>
      <form onSubmit={handleSubmit}>
        <input type="text" value={item} onChange={handleChange} />
        <button type="submit">ADD</button>
      </form>
    </div>
  );
}

export default App;

Explanation of Above Code:
Create a state "item" to store the value of item entered by user.Create another state "list" to store the collection of item in an array.

Create an arrow function "handleChange" to handle the state "item" whenever user enters a new value in the input form.Change the state by using setItem and assign it to the target value.
Create another function "handleSubmit" to update the array list with the item everytime user enters a new item.Here every item includes an unique id which is generated by using uuid(Refer to the link https://www.npmjs.com/package/uuid),item and "complete" which is a boolean state and here we are using it to mark the item complete or incomplete by making it "true" or "false".

Now let us create a new component Item.js.Below is the code:

import React from "react";
import "./Item.css";

const Item = ({ id, items, list, setList, complete }) => {
  const remove = (id) => {
    setList(list.filter((el) => el.id !== id));
  };

  const handleComplete = (id) => {
    setList(
      list.map((item) => {
        if (item.id === id) {
          return {
            ...item,
            complete: !item.complete,
          };
        }
        return item;
      })
    );
  };

  return (
    <div className="item">
      <p className={complete ? "complete" : ""}>{items}</p>
      <img
        onClick={() => handleComplete(id)}
        src="https://img.icons8.com/offices/40/000000/checked-2--v2.png"
        alt="complete task"
      />
      <img
        onClick={() => remove(id)}
        src="https://img.icons8.com/color/48/000000/trash.png"
        alt="Delete"
      />
    </div>
  );
};
export default Item;

Here to delete the items we are going to filter the item which we want to remove and display the remaining ones.To filter we are comparing the ids of the items.
Now to mark the items complete we are going to loop through the list array and by comparing the id we will change the state "complete" of that item.
Design is optional so you can choose your own design.Use styled components for React if you want.Refer to this link-https://styled-components.com/docs/basics

Here is the final App:

Final Project Demo Link-https://tender-lovelace-00a0b9.netlify.app/
Github Repository Link-https://github.com/kritika27/grocery-list-reactjs

Improvements:
1.You can add local storage.
2.You can add backend through Firebase.
3.You can add Sign in and Sign up functionality.

Suggestions are always welcome :)