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>
)
}
`
Top comments (0)