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)