I'm trying to get a useReducer to make visible/hide 9 different comboboxes when they click a plus or minus button. I have it working withuseState but a co-worker said to use useReducer instead but I can't figure out how to make it work. The idea behind this is when they click the add button we show the appropiate combobox. It won't work though. I don't know what I'm missing.
const initialState = {
infant1VisibleCombobox: true,
infant2VisibleCombobox: true,
infant3VisibleCombobox: true,
infant4VisibleCombobox: true,
infant5VisibleCombobox: true,
infant6VisibleCombobox: true,
infant7VisibleCombobox: true,
infant8VisibleCombobox: true,
infant9VisibleCombobox: true
};
const reducer = (state: any, action: { type: any }) => {
switch (action.type) {
case 'add':
var value = infantTraveler + 1;
setInfantTraveler(value);
switch (value) {
case 1:
return { infant1VisibleCombobox: !state };
break;
case 2:
return { infant2VisibleCombobox: !state };
break;
case 3:
return { infant3VisibleCombobox: !state };
break;
case 4:
return { infant4VisibleCombobox: !state };
break;
case 5:
return { infant5VisibleCombobox: !state };
break;
case 6:
return { infant6VisibleCombobox: !state };
break;
case 7:
return { infant7VisibleCombobox: !state };
break;
case 8:
return { infant8VisibleCombobox: !state };
break;
case 9:
return { infant9VisibleCombobox: !state };
break;
}
break;
case 'subtract':
var value = infantTraveler - 1;
setInfantTraveler(value);
switch (value) {
case 1:
return { infant1VisibleCombobox: !state };
break;
case 2:
return { infant2VisibleCombobox: !state };
break;
case 3:
return { infant3VisibleCombobox: !state };
break;
case 4:
return { infant4VisibleCombobox: !state };
break;
case 5:
return { infant5VisibleCombobox: !state };
break;
case 6:
return { infant6VisibleCombobox: !state };
break;
case 7:
return { infant7VisibleCombobox: !state };
break;
case 8:
return { infant8VisibleCombobox: !state };
break;
case 9:
return { infant9VisibleCombobox: !state };
break;
}
break;
default:
throw new Error();
}
};
const [state, dispatch] = useReducer(reducer, initialState);
<li className="bg-white p-1">
<div className="bg-gray3 flex justify-between items-center">
<div>
<p className="font-bold ml-2">Lap Infants</p>
<p className="text-xs ml-2">(Under 2)</p>
</div>
<div className="flex flex-row pb-2 mt-2 mb-1">
<Button
style={minusStyle}
onClick={() => dispatch({ type: 'subtract' })}
disabled={disableInfantMinusButton}
/>
<p className="w-[2px] !ml-2 !mr-3">{infantTraveler}</p>
<Button
className="ml-2"
style={plusStyle}
onClick={() => dispatch({ type: 'add' })}
disabled={disableInfantPlusButton}
/>
</div>
</div>
<div className="bg-gray3 flex items-start">
<div className="pb-2 mt-2 pl-2" hidden={infant1VisibleCombobox}>
<Dropdown
value={infant1value}
name="infant1Age"
labelClassName="text-xs"
label="Infant 1 Age"
className="w-[90px] p-1"
options={infantAge}
onChange={handleInfant1Change}
/>
</div>
<div className="pb-2 mt-2 pl-16" hidden={infant2VisibleCombobox}>
<Dropdown
value={infant2value}
name="infant2Age"
labelClassName="text-xs"
label="Infant 2 Age"
className="w-[90px] p-1"
options={infantAge}
onChange={handleInfant2Change}
/>
</div>
<div className="pb-2 mt-2 pl-16 pr-2" hidden={infant3VisibleCombobox}>
<Dropdown
value={infant3value}
name="infant3Age"
labelClassName="text-xs"
label="Infant 3 Age"
className="w-[90px] p-1"
options={infantAge}
onChange={handleInfant3Change}
/>
</div>
</div>
<div className="bg-gray3 flex items-start">
<div className="pb-2 mt-2 pl-2" hidden={infant4VisibleCombobox}>
<Dropdown
value={infant4value}
name="infant4Age"
labelClassName="text-xs"
label="Infant 4 Age"
className="w-[90px] p-1"
options={infantAge}
onChange={handleInfant4Change}
/>
</div>
<div className="pb-2 mt-2 pl-16" hidden={infant5VisibleCombobox}>
<Dropdown
value={infant5value}
name="infant5Age"
labelClassName="text-xs"
label="Infant 5 Age"
className="w-[90px] p-1"
options={infantAge}
onChange={handleInfant5Change}
/>
</div>
<div className="pb-2 mt-2 pl-16 pr-2" hidden={infant6VisibleCombobox}>
<Dropdown
value={infant6value}
name="infant6Age"
labelClassName="text-xs"
label="Infant 6 Age"
className="w-[90px] p-1"
options={infantAge}
onChange={handleInfant6Change}
/>
</div>
</div>
<div className="bg-gray3 flex items-start">
<div className="pb-2 mt-2 pl-2" hidden={infant7VisibleCombobox}>
<Dropdown
value={infant7value}
name="infant7Age"
labelClassName="text-xs"
label="Infant 7 Age"
className="w-[90px] p-1"
options={infantAge}
onChange={handleInfant7Change}
/>
</div>
<div className="pb-2 mt-2 pl-16" hidden={infant8VisibleCombobox}>
<Dropdown
value={infant8value}
name="infant8Age"
labelClassName="text-xs"
label="Infant 8 Age"
className="w-[90px] p-1"
options={infantAge}
onChange={handleInfant8Change}
/>
</div>
<div className="pb-2 mt-2 pr-2 pl-16" hidden={infant9VisibleCombobox}>
<Dropdown
value={infant9value}
name="infant9Age"
labelClassName="text-xs"
label="Infant 9 Age"
className="w-[90px] p-1"
options={infantAge}
onChange={handleInfant9Change}
/>
</div>
</div>
</li>
