Forem

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 blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)