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>
Something like this would suffice. Filter according to the selected id and put checked to true.