React lifting states up and down multiple times to filter components

Question

Component diagram:

"Main"
|--"Side"--"CategoryPicker"
|
|--"ItemBoard"

categoryPicker gets the chosen value.

    const filterResultHandler = (e) => {
    props.onFilterChange(e.target.value);}
    ...
    onChange={filterResultHandler}

And lift up the value to Side .

   const [filterState, setFilterState] = useState("all");    
   const onFilterChangeHandler = () => { props.onPassData(setFilterState);};

   ...

   <CategoryPicker selected={filterState} onFilterChange={onFilterChangeHandler} />

Then I repeat to lift value to the Main . (Up to this point I have console.log the value and it seemed OK.)

  const [recData, setRecData] = useState("all");

  const onFilterChangeHandler = (passedData) => {
  setRecData(passedData);};

  <Side onPassData={onFilterChangeHandler} selected={recData} />

Then pass it down to Itemboard as a prop.

<ItemBoard items={items} recData={recData} />

In ItemBoard I am trying to filter the array then compare to later map it and display filtered components.

 const filteredProducts = props.items.filter((product) => {
 return (product.cat.toString() === props.recData)})

 {filteredProducts.map((product, index) => (
 <Item cat={product.cat} />
 ))}

Warning: Cannot update a component ( Side ) while rendering a different component ( Main ). To locate the bad setState() call inside Main

Where am I loosing my logic? PS. Trying to focus on understanding how lifting up and passing props works, not looking for better solutions to the problem right now.

Answer 1

you have the bad setState use in this code:

const [recData, setRecData] = useState("all");
    
      const onFilterChangeHandler = (passedData) => {
      setRecData(passedData);};
    
      <Side onPassData={onFilterChangeHandler} selected={recData} />

why you are passing this selected={recData} data again to Side component, you are updating the state of Main component from Side component and passing the selected={recData} again, remove this and try again