How to set state to filtered item react

40 views Asked by At

I would like to ask some help. I am new in react and got stuck creating check handler. I need to get item from the state and execute this handler only for selected item. I think, when checking/unchecking checkbox the handler should set state - checked:true/false for selected item only. I got stuck how to set state to selected item. My handler executes on all items.

    import React, { Component, createContext } from "react";
    import uuid from "react-uuid";
    import { warehouseProducts } from "./data";

    const ProductContext = createContext();

    class ProductProvider extends Component {
      state = {
        products: [],
        detailProduct: "",
        editItem: "",
        isDisabled: true,
        checked: true,
      };

     [...]

    checkHandler = (id) => {
        const product = this.state.products.filter(item => item.id === id);
        this.setState(() => {
          return { checked:!this.state.checked };
        });
      }

Other component where I apply this checkHandler:

      [...]
       <ProductConsumer>
          {(value) => (
            <>
              <td style={{ width: "60px" }}>
                <input
                  type="checkbox"
                  onChange={()=>value.checkHandler(id)}
                  defaultChecked={value.checked}
                />
              </td>

              <td style={{ width: "250px" }}>
                <Link to="/products/{id}">
                  {value.checked ? (
                    <button
                      className="View"
                      onClick={() => value.productDetailHandler(id)}
                    >
                      View
                    </button>
                  ) : (
                    value.isDisabled
                  )}
                </Link>
1

There are 1 answers

3
Prateek Thapa On

Something like this would suffice. Filter according to the selected id and put checked to true.

  checkHandler = (id) => {
      const updatedProducts = this.state.products.map(product => {
        if (product.id === id) return { ...product, checked: true };
        return { ...product, checked: false};
      })
        this.setState({ products: updatedProducts });
      }