ByReference useState

Question

Using mui-material, i'm collapsing a table row using this line

<Collapse in={"open"+row.name} timeout="auto" unmountOnExit>

I have a useState

const [openOne, setOpenOne] = useState(false)

during the .map iteration, the first row.name would be One so in the collpase it would create like in={openOne}

My problem is how do I reference the {"open"+row.name} which would be {openOne} to the useState openOne ?

Answer 1

You should use a different approach.

Maybe instead of using a different useState for each item, you should use one that hold the values for all of them.

const [openRows, setOpenRows] = useState(()=>{
   // replace allRows with the list of rows you have
   allRows.reduce((acc, {name})=>({
     ...acc,
     [name]: false
   }),{});
});

now you can use

<Collapse in={openRows[row.name]} timeout="auto" unmountOnExit>

and to set a row, you can do

setOpenRows((currentOpen) => ({
  ...currentOpen,
  'one': true  // or [row.name]: true if you are using it in a dynamic way
}));