Queshtion about removing an item for a map

Question

Im having trouble configuring a remove function for my shopping-list project, the purpose of the project is to make a shopping list with a checkbox, a quantity and an item name, but there's another feature that i can't figure out how to add it, i want to a button ( ), that will remove the selected item, now, the item are mapped, which means they are in lines, if i write ("milk", "2") and then ("milk","3"), it will go line after line, like this:
milk - 2
milk - 3.
now, i want to add a delete button, next to every line that is created, that will be able to delete that line which is connected to him, im guessing i need to define an index, and the map function will do it for me, and it will be easier, but i havent found any explanation about it, so, if you can add to the code a remove button, and explain how did u do it, that would be lovely, thanks in advance guys!

import React, { useState } from 'react';

export const ShoppingListPageContainer = () => {
  const [item, setItem] = useState('');
  const [quantity, setQuantity] = useState('');
  const [list, setList] = useState([]);

  const add = () => {
    const date = { item, quantity };
    if (item || quantity) {
      setList((ls) => [...ls, date]);
      setItem('');
      setQuantity('');
    }
  };
  
  return (
    <div>
      <label>
        <input
          name='item'
          value={item}
          onChange={(e) => setItem(e.target.value)}
        />
        <input
          type='number'
          name='quantity'
          value={quantity}
          onChange={(e) => setQuantity(e.target.value)}
        />
        <button onClick={add}>add</button>
      </label>

      {list.map((a) => {
        return (
          <div>
            <il>{a.item}</il>
            <il>{' - ' + a.quantity + ' '}</il>
            <input type='checkbox' />
            <button />
          </div>
        );
      })}
    </div>
  );
};

First let me suggest formating your code well. there is something prettier please use it. — MUGABA, May 31 '22 at 06:27
Second Map will help you render the items to the view. If you want to remove one. Please read about the filter method. Plus check on the way your using your setList function — MUGABA, May 31 '22 at 06:30

score 0 · Answer 1 · answered May 31 '22 at 06:32

Steps:

create function which will accept id as parameter and delete the item in list which matches that id. (Note: id should be uniq). For example:

const deleteItem = (id) => {
   //logic delete by id from list
}

Add this button on map and bind id. For example:

list.map((a)=><div>
           <il>{a.item}</il>
           <il>{" - "+ a.quantity + " "}</il>
           <button onClick={deleteItem.bind(this, a.id)} />
</div>)

By this way you can delete only one item at a time. By binding ID to function you will call function with binded id only. I hope this will help you to progress... Best of luck!

how can i ceate that function that will accept id as parameter? — MikeyNeedHelp, May 31 '22 at 06:37

score 0 · Answer 2 · answered May 31 '22 at 06:42

export const ShoppingListPageContainer = () => {
  const [item, setItem] = useState("");
  const [quantity, setQuantity] = useState("");
  const [list, setList] = useState([]);

  const handleAddItem = () => {
    const date = { item, quantity };
    if (item || quantity) {
      const newList = [...list, date]
      setList(newList);
      setItem("");
      setQuantity("");
    }
  }; 

 const handleRemoveItem = (index)=>{
      const newList = list.filter((item)=>list.indexOf(item) !==index)
      setList(newList)
 }

  return (
    <div>
      <label>
        <input
          name="item"
          value={item}
          onChange={(e) => setItem(e.target.value)}
        />
        <input
          type="number"
          name="quantity"
          value={quantity}
          onChange={(e) => setQuantity(e.target.value)}
        />
        <button onClick={handleAddItem}>add</button>
      </label>

      {list.map((a,i) => (
        <div>
          <il>{a.item}</il>
          <il>{` ${a.quantity} `}</il>
          <input type="checkbox" />
          <button onClick={()=>{handleRemoveItem(i)}} />
        </div>
      ))}
    </div>
  );
};

This may help you however if it does not please check the implementation of the filter method https://www.w3schools.com/jsref/jsref_filter.asp

Queshtion about removing an item for a map

2 Answers2