DEV Community

Seriti Aymen
Seriti Aymen

Posted on

1 1

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

}
`

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (0)

The best way to debug slow web pages cover image

The best way to debug slow web pages

Tools like Page Speed Insights and Google Lighthouse are great for providing advice for front end performance issues. But what these tools can’t do, is evaluate performance across your entire stack of distributed services and applications.

Watch video

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay