How to get mui Chip value before delete on Autocomplete freeSolo? - reactjs

Question

I'm working with Autocomplete and Chip component from the mui library. There's the DEMO (standard boilerplate).
I can't get the Chip contents before deleting it:
<Autocomplete
multiple
id="tags-filled"
options={top100Films.map((option) => option.title)}
defaultValue={[top100Films[1].title]}
freeSolo
onKeyDown={(prop) => {
if (prop.key === 'Enter') {
console.log(prop.target.value)
}
}}
renderTags={(value, getTagProps) =>
value.map((option, index) => (
<Chip
onDelete={(s) => console.log("the one", option)}
key={index} variant="outlined"
label={option} {...getTagProps({ index })} />
))
}
renderInput={(params) => (
<TextField
{...params}
variant="filled"
label="freeSolo"
placeholder="Favorites"
/>
)}
/>
The issue is this
renderTags={(value, getTagProps) =>
value.map((option, index) => (
<Chip
onDelete={(s) => console.log("the one", option)}
key={index} variant="outlined"
label={option} {...getTagProps({ index })} />
))
}
If I remove {...getTagProps({ index })} I do get the onDelete working the way I need it to but then the actual removal doesn't work. Again, the DEMO here

Answer 1

you can use
onChange={(e, value, situation, option) => {
if (situation === "removeOption") {
//write your code here
console.log("--->", e, value, situation, option);
}
setReceivers((state) => value);
}}
instead of the onDelete like this :
import * as React from "react";
import Chip from "#mui/material/Chip";
import Autocomplete from "#mui/material/Autocomplete";
import TextField from "#mui/material/TextField";
import Stack from "#mui/material/Stack";
export default function Tags() {
const [val, setVal] = React.useState({});
const [receivers, setReceivers] = React.useState([]);
console.log(receivers);
const handleClick = () => {
setVal(top100Films[0]); //you pass any value from the array of top100Films
// set value in TextField from dropdown list
};
return (
<Stack spacing={1} sx={{ width: 500 }}>
<Autocomplete
multiple
id="tags-filled"
options={top100Films.map((option) => option.title)}
defaultValue={[top100Films[13].title]}
freeSolo
onChange={(e, value, situation, option) => {
if (situation === "removeOption") {
console.log("--->", e, value, situation, option);
}
setReceivers((state) => value);
}}
renderTags={(value, getTagProps) =>
value.map((option, index) => (
<Chip
variant="outlined"
label={option}
{...getTagProps({ index })}
/>
))
}
renderInput={(params) => (
<TextField
{...params}
variant="filled"
label="freeSolo"
placeholder="Favorites"
/>
)}
/>
</Stack>
);
}
codesandbox