Queshtion about removing an item for a map-CodePudding

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>
  );
};

CodePudding user response：

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!

CodePudding user response：

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