I am facing a challenge with the Material UI AutoComplete component in my project. The issue arises when I try to update the state of the associateList after clearing a TextField. Additionally, I would appreciate any guidance on how to handle removing an associate from the associateOptions list when they are added or removed from the TextField. Despite my attempts, I encountered errors stating that the item was not found in the associateOptions.
import { Autocomplete, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField } from '@mui/material';
import React, { useState } from 'react';
const rows = [
{ processPath: 'Role 1', headcount: 2 },
{ processPath: 'Role 2', headcount: 1 },
{ processPath: 'Role 3', headcount: 3 },
{ processPath: 'Role 4', headcount: 2 },
{ processPath: 'Role 5', headcount: 2 },
];
export const EmployeesByPath: React.FC = () => {
const associateOptions = ['john', 'kevin', 'sally', 'mark'];
// const [associateOptions, setAssociateOptions] = useState<string[]>(['john', 'kevin', 'sally', 'mark']);
const [associateList, setAssociateList] = useState<Record<string, string[] | undefined>>({});
const getAssociatesByProcessPath = (processPath: string): string[] => {
return associateList[processPath] ?? [];
};
// const handleAssociateRemove = (processPath: string, associateIndex: number): void => {
// setAssociateList((prevAssociateList) => ({
// ...prevAssociateList,
// [processPath]: [...getAssociatesByProcessPath(processPath).filter((_, i) => i !== associateIndex)],
// }));
// };
const handleSelection = (processPath: string, associateIndex: number, associate: string | null): void => {
setAssociateList((prevAssociateList) => {
const updatedAssociateList = getAssociatesByProcessPath(processPath);
if (associate) {
updatedAssociateList[associateIndex] = associate;
} else {
updatedAssociateList.filter((_, i) => i !== associateIndex);
}
return {
...prevAssociateList,
[processPath]: updatedAssociateList,
};
});
};
console.log(associateList);
return (
<>
<TableContainer component={Paper} sx={{ minWidth: 800 }}>
<Table>
<TableHead>
<TableRow>
<TableCell>Process Path</TableCell>
<TableCell>Associate Login</TableCell>
</TableRow>
</TableHead>
<TableBody>
{rows.map((row, rowIndex) => (
<TableRow
key={rowIndex}
sx={{
'&:last-child td, &:last-child th': { border: 0 },
}}>
<TableCell style={{ width: '35%' }}>{row.processPath}</TableCell>
<TableCell style={{ width: '45%' }} component='th' scope='row'>
{[...Array(row.headcount)].map((_: undefined, index: number) => (
<Autocomplete
// disablePortal
sx={{ maxWidth: '240px', marginBottom: 1 }}
key={`roles-${index}`}
id='employeesList'
options={associateOptions}
onChange={(__, associate) => handleSelection(row.processPath, index, associate)}
renderInput={(params) => <TextField {...params} label={`Select an associate`} variant='outlined' />}
/>
))}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</>
);
};