Блог

вот мой компонент продукта, где я определяю функцию удаления

Я не могу удалить элемент из списка продуктов. нужна помощь для решения этой проблемы. пожалуйста, помогите мне с этим. Спасибо.

 
    import React, { useContext } from "react";
    import { ContextProduct } from "./ContextProduct";
    
    function Product({ name, price }) {
      const [items, setItems] = useContext(ContextProduct);
      const removeProduct = (id) => {
        setItems(items.filter((item) => item.id !== id));
      };
      return (
        <div>
          <h3>{name}</h3>
          <p>{price}</p>
          <button onClick={() => removeProduct()}> delete</button>
        </div>
      );
    }
    
    export default Product;

  

и здесь ContextProvider

 
     import React, { createContext, useState } from "react";
    
    export const ContextProduct = createContext();
    
    const ProductProvider = (props) => {
      const [items, setItems] = useState([
        {
          name: "redmi note 9",
          price: "15000",
    
          id: 123,
        },
      ]);
      return (
        <ContextProduct.Provider value={[items, setItems]}>
          {props.children}
        </ContextProduct.Provider>
      );
    };
    
    export default ProductProvider;

  

введите код здесь и здесь список продуктов

 
    import React, { useContext, useState } from "react";
    import { ContextProduct } from "./ContextProduct";
    import Product from "./Product";
    
    function ProductList() {
      const [items, setItems] = useContext(ContextProduct);
    
      return (
        <div>
          {items.map((item) => (
            <Product name={item.name} price={item.price} key={item.id} />
          ))}
        </div>
      );
    }
    
    export default ProductList;

  

пожалуйста, помогите мне решить эту проблему, спасибо

Вы должны передать идентификатор вместе с ценой и именем, и в вашей функции вы должны передать его в качестве запрошенного аргумента.

   function Product({ name, price, id }) {
      const [items, setItems] = useContext(ContextProduct);
      const removeProduct = (id) => {
        setItems(items.filter((item) => item.id !== id));
      };
      return (
        <div>
          <h3>{name}</h3>
          <p>{price}</p>
          <button onClick={() => removeProduct(id)}> delete</button>
        </div>
      );
    }