I am attempting to utilize the MUI Select (with a chip) within a list, specifically with multiple selects based on certain data. It may be somewhat challenging to explain.
I have the capability to add or remove an individual select.
function SelectTest({}: Props) {
const [selectArray, setSelectArray] = useState([{name: "Select 1", value: 1},{name: "Select 2", value: 2},{name: "Select 3", value: 3}])
const handleAddSelect = () => {
setSelectArray((prev) => {
return [{name: "New select", value: 1}, ...prev];
})
}
const handleDeleteSelect = (id: number) => {
let temp = [...selectArray];
console.log(id)
temp.splice(id, 1);
console.log(temp)
setSelectArray(temp)
}
return (
<Container
sx={{
display: "flex",
flexDirection: "column",
gap: 1,
}}
>
<List>
{selectArray.map((item, index) => (
<SelectCard id={index} key={index} onDelete={handleDeleteSelect} value={item.value}/>
))}
</List>
<Button onClick={handleAddSelect}>Add Select</Button>
</Container>
)
}
export default SelectTestAnd The Child Component
type Props = {
onDelete: Function,
id: number,
value: number
};
const values = [
{
label: "Item 1",
value: 1,
},
{
label: "Item 2",
value: 2,
},
{
label: "Item 3",
value: 3,
},
{
label: "Item 4",
value: 4,
},
];
export default function SelectCard(props: Props) {
const [item, setItem] = useState<number>(props.value)
const handleItemChange = (event: SelectChangeEvent<typeof item>) => {
const {
target: { value },
} = event;
console.log(value);
setItem(value as number);
}
return (
<Card>
<CardHeader
title={"Select item " + props.id}
sx={{
backgroundColor: colorConfigs.sidebar.bg,
color: colorConfigs.sidebar.color,
display: "flex",
justifyContent: "space-evenly",
}}
action={
<IconButton
onClick={() => {
props.onDelete(props.id);
}}
sx={{
color: colorConfigs.sidebar.color,
alignSelf: "flex-end",
}}
>
<DeleteOutline />
</IconButton>
}
/>
<CardContent
sx={{
display: "flex",
flexDirection: "row",
gap: 1,
pt: 2,
}}
>
<FormControl
sx={{
flex: 1,
}}
>
<InputLabel>{props.id}</InputLabel>
<Select
value={item}
onChange={handleItemChange}
input={
<OutlinedInput
label="Item"
/>
}
>
{values.map((item, index) => (
<MenuItem key={index} value={item.value}>
{item.label}
</MenuItem>
))}
</Select>
</FormControl>
</CardContent>
</Card>
);
}I encounter strange behavior when adding an item, but I believe it is all connected. The primary issue arises when I "Delete" a select. In my actual application, I am elevating the state of the select's values and can observe that the correct values and objects are being deleted in the console. However, the rendered items still display the old values.
It appears to only remove the last item.
For instance, if I add 3 selects, assign different values to each (1 = 1, 2 = 2, 3 = 3), and then delete item 2, despite console messages indicating the correct deletion, visually I see 2 selects with the values of 1 = 1 and 2 = 2.
https://i.stack.imgur.com/6BEH6.png
https://i.stack.imgur.com/8iBrL.png
This is the console output after I "Delete" Select 2. While I clearly removed Select 2, the images above show that "Item 2" is still selected with its previous value, rather than expecting Item 3 to be displayed.