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

Seriti Aymen — Wed, 23 Feb 2022 10:20:58 +0000

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>
)

}
`

DEV Community: Seriti Aymen

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