Question 230724 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – I can't understand what is wrong with this select with material react table

I have the following problem: On page load I have a useEffect that returns an x number of records with the following format:

TBLNAME: ‘Table1’

TBLNAME: ‘Table2’

TBLNAME: ‘Table3’

…….

And this is the code to load the select:

const [selectTables, setSelectTables] = useState([]);
.........
 
<FormControl variant="standard" sx={{ m: 1, minWidth: 350 }}>
   <InputLabel >Tablas cargadas</InputLabel>
   <Select
      id="selecttable"
      key={values.iD}
      name={"Tabla"}
      //onChange={(e) =>
      //setValues({ ...values, [e.target.name]: e.target.value })
      // }
    >
    {selectTables.map((table, index) =>
      <menuitem >
      {table}
      </menuitem >
      )}
    </Select>
</FormControl>

When I want to display the select, I get the following error:
"Objects are not valid as a React child (found: object with keys {TABLE_NAME}). If you meant to render a collection of children, use an array instead."

Any help please.
Thank you

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    thanks for the help, the problem was how menuitem was written instead of MenuItem. Thanks a lot


  2. 0

    TL;DR Use a proper React Node Object Type

    You’ve just been given an invariant that is informing you what ought to be a React child.

    You can JSON.stringify() your data raw, provide a specific value of a given element of selectTables, or convert some values to strings if you need to append display data in a readable manner. The possibilities to display are up to you but they ought to be a valid child.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search