Beginners’ friendly Grocery List App in ReactJS

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

Then to change the directory:

cd grocerylist 
Enter fullscreen mode Exit fullscreen mode

Then,start the server:

npm start 
Enter fullscreen mode Exit fullscreen mode

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:

 
        
        ADD
      
Enter fullscreen mode Exit fullscreen mode

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 (
    

Grocery List

ADD
); } export default App;
Enter fullscreen mode Exit fullscreen mode

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 (
    

{items}

handleComplete(id)} src="https://img.icons8.com/offices/40/000000/checked-2--v2.png" alt="complete task" /> remove(id)} src="https://img.icons8.com/color/48/000000/trash.png" alt="Delete" />
); }; export default Item;
Enter fullscreen mode Exit fullscreen mode

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:

from Tumblr https://generouspiratequeen.tumblr.com/post/635313498136756224

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s