DEV Community

Seriti Aymen
Seriti Aymen

Posted on

TypeError: Cannot read properties of undefined (reading 'title')

I want to add the element selected of a select into a table and after inserting more than one element I get the error in the title!

The elements of the select

export const getBP = () => [
{ id: "1", title: "A" },
{ id: "2", title: "B" },
{ id: "3", title: "C" },
{ id: "4", title: "D" },
{ id: "5", title: "E" },
{ id: "6", title: "F" },
{ id: "7", title: "G" },
{ id: "8", title: "H" },
{ id: "9", title: "I" },
];

the function that I am using to get the elements from the local storage(since I am inserting them in local and then get them from there to the table

export function getAllDocument() {
if (localStorage.getItem(KEYS.documents) === null)
localStorage.setItem(KEYS.documents, JSON.stringify([]));
let documents = JSON.parse(localStorage.getItem(KEYS.documents));
let BPs = getBP();
return documents.map((x) => ({
...x,
emploi: BPs[x.Emploi - 1].title,
}));

The Table element:

<TblContainer>
<TableBody>
{
records.map(item=>
(<TableRow key={item.id}>
<TableCell>{item.Radical}</TableCell>
<TableCell>{item.emploi}</TableCell>
<TableCell>{item.Montant}</TableCell>
<TableCell>{item.Taux}</TableCell>
<TableCell>{item.Duree} mois</TableCell>
<TableCell>{item.DateE}</TableCell>
<TableCell>{item.DateP}</TableCell>
</TableRow>)
)
}
</TableBody>
</TblContainer>

This last element is the select component:

`import React from 'react'
import { FormControl, InputLabel, Select as MuiSelect, MenuItem, FormHelperText } from '@material-ui/core';

export default function Select(props) {

const { name, label, value,error=null, onChange, options } = props;

return (
    <FormControl variant="outlined"
    {...(error && {error:true})}>
        <InputLabel>{label}</InputLabel>
        <MuiSelect
            label={label}
            name={name}
            value={value}
            onChange={onChange}>
            <MenuItem value="">None</MenuItem>
            {
                options.map(
                    item => (<MenuItem key={item.id} value={item.id}>{item.title}</MenuItem>)
                )
            }
        </MuiSelect>
        {error && <FormHelperText>{error}</FormHelperText>}
    </FormControl>
)
Enter fullscreen mode Exit fullscreen mode

}
`

Top comments (0)