Maintaining previously selected item state in stepper - reactjs

Question

I'm working with a Material UI stepper wherein each step returns a list of selected items.
In each step, the user can click an item that is highlighted before moving onto the next step.
The results are mapped in a separate component.
const [clicked, setClicked] = useState(undefined);
const selectStyleAndFilter = (item, index) => {
setClicked(index);
selectedItems[activeStep] = item;
};
const handleBack = () => {
setActiveStep(activeStep - 1);
setClicked(undefined);
if (activeStep === 1) {
nextStep(selectedItems).then(products => {
console.log(
'productCount back',
products.data.data.contents.total
);
setActiveStep(activeStep - 1);
setClicked(undefined);
setProductCount(
products.data.data.contents.total === undefined
);
});
}
};
However, when I click the back button to return to the previous step, the item is no longer highlighted.
I tried using the logic from selectStyleAndFilter in the handleBack function to keep the item in state:
const handleBack = (item, index) => {
setActiveStep(activeStep - 1);
setClicked(index);
selectedItems[activeStep] = item;
How can I keep the setClicked state of the previous item applied in the handleBack function?

Answer 1

Convert clicked to be an object that holds the clicked item for each activeStep.
const [clicked, setClicked] = useState({});
The current clicked is derived from the clicked object and activeState
const currentClicked = clicked[activeStep];
When you set the currently clicked item, store it under the activeSet, and maintain the state of the other clicked items:
const selectStyleAndFilter = (item, index) => {
// add the current, but maintain the state of the others
setClicked(c => ({ ...c, [activeStep]: index }));
selectedItems[activeStep] = item;
};
Don't reset the clicked state when moving between steps:
const handleBack = () => {
setActiveStep(activeStep - 1);
if (activeStep === 1) {
nextStep(selectedItems).then(products => {
console.log(
'productCount back',
products.data.data.contents.total
);
setActiveStep(activeStep - 1);
setProductCount(
products.data.data.contents.total === undefined
);
});
}
};