React useState, how to reset to initial value - reactjs

Question

I have a problem in this code. I need reset item array in line but don't work.
if (!(element.name in filter){setItem([])}
import React, { useState, useEffect, cloneElement } from 'react';
import {fetchData} from '../helpers/fetchData';
function MainElement() {
const [data, setData] = useState([]);
const [filter, setFilter] = useState({});
const [item, setItem] = useState([]);
useEffect( () => {
fetchData("http://localhost/cataleg/php/p3filtres.php")
.then( category => {
setData(category);
});
}, [])
return (
<div onChange={
(e) => {
const product = document.querySelectorAll('input[type="checkbox"]:checked');
[...product].map((element) => {
if (!(element.name in filter){
setItem([]);
}else
setItem([...item, element.value])
return filter[element.name]=item;
})
}
}
>
{
data && Object.entries(data).map((element,i) => {
return (
<div key={i}>
<h3 key={element[0]}>{element[0]}</h3>
{
element[1].map(item => {
return (
Object.entries(item).map((value,i) => {
if (i%2)
return <div key={i}>
<input type="checkbox" key={value[1]} name={element[0]} value={value[1]}/>
<label key={`${value[1]}-${i}`} htmlFor={value[1]}>{value[1]}</label>
</div>
})
)
})
}
</div>
)
})
}
</div>
)
}
export default MainElement;
enter image description here
When ckeckbox is checked I want to store in an object like:
{'processor': [I7,I5], 'RAM':['4GB','8GB']}
So I need reset item array for each key in the object. In may code item array is [I7,I5,'4GB','8GB']

Answer 1

There is a list of things worth fixing in your codes.
onChange has no effect on div
document.querySelector and document.querySelectorAll should not be used inside a React component
Include the <input> checkboxes as part of your app
See useRef if you must reference other elements
.map is being used like .forEach
setItem([...item, element.value]) is called for every element regardless of your condition
filtre is misspelled
item is derived state that should not have its own state
Use data.filter to compute item
See Single Source of Truth
Here is a minimal complete example you can run in your browser.
function fetchProducts() {
return new Promise(resolve =>
setTimeout(resolve, 1000, [
{"name": "carrot", type: "vegetable", quantity: 6 },
{"name": "potato", type: "vegetable", quantity: 0 },
{"name": "pretzels", type: "snack", quantity: 3 }
]))
}
function App() {
const [products, setProducts] = React.useState([])
const [isVegetable, veggieFilter] = useCheckbox(false)
const [isStocked, stockFilter] = useCheckbox(false)
React.useEffect(_ => {
fetchProducts().then(setProducts).catch(console.error)
}, [])
function filter() {
return products
.filter(p => !isVegetable || p.type == "vegetable")
.filter(p => !isStocked || p.quantity > 0)
}
return <div>
Vegetable:{veggieFilter} In-Stock:{stockFilter}
{filter().map(p => <pre>{JSON.stringify(p)}</pre>)}
</div>
}
function useCheckbox(initValue = false) {
const [checked, setChecked] = React.useState(initValue)
return [
checked,
<input type="checkbox" checked={checked} onClick={_ => setChecked(!checked)} />
]
}
ReactDOM.render(<App/>, document.querySelector("#app"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.14.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.14.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>