javascript - Pass key to table cell

Question

Im trying to save an object fetched from a Mongoose Database in the table cell with a key and value. The key is the objectId I want. The value itself is to be displayed to the user in the table and the key to be saved but not displayed, so that when the user clicks on a certain object in the table, I get it’s objectID and know exactly which object in the database that maps to what the user clicked on.

I want to display the following table

 --------------------------------------------------------------------------

|                 | 1              | 2            | 3             | [...] |
| Sunday          |                |              |               |       |
                              
| Monday          | String1        |              |               |       |
| Tuesday         |                |              |               |       |
| Wednesday       |                | String2      | String3       |       |
| Thursday        |                |              |               |       |
| Saturday        |                |              |               |       |
---------------------------------------------------------------------------

Below is an array called tableData that simulates what’s to be fetched from database

const tableData =
[
    {day: "sunday"},
    {1: [{key: "5ff5d68642d5e04e20e9cac6", value: "String1"}],day: "monday"},
    {day: "tuesday"},
    {2: [{key: "5ff4a9e0c4909933a0d3e2af", value: "String2}], 3: [{key: "5ff4a9e6c4909933a0d3e2b0", value: "String3"}],day: "wednesday"},
    {day: "thursday"},
    {day: "saturday"}
]

but it doesn't work, it only works when the data is as follows, but I want to have the objectId at hand mapping to each cell.

    const tableData = 
                       [
                           {day: "sunday"}, 
                           {1: ["String1"], day: "monday"}, 
                           {day: "tuesday"},
                           {2: ["String2"], 3: ["String3"], day: "wednesday"},
                           {day: "thursday"}, 
                           {day: "saturday"}
                       ]

What I am trying to do is that when i click on the cell e.g. String1, the key would be returned so I could use it to execute a certain functionality in the code.

export const COLUMNS = [
  {
    Header: "",
    accessor: "day",
  },
  {
    Header: "1",
    accessor: "1",
  },
  {
    Header: "2",
    accessor: "2",
  },
  {
    Header: "3",
    accessor: "3",
  },
  {
    Header: "4",
    accessor: "4",
  },
  {
    Header: "5",
    accessor: "5",
  },
];

export const  Table= ()=> {
    const columns = useMemo(()=> COLUMNS, [])
    const data = useMemo(()=> tableData,[tableData])
    const tableInstance = useTable({
        columns,
        data

    })
    const {getTableProps,getTableBodyProps,headerGroups,rows,prepareRow} = tableInstance
    return (
        <table {...getTableProps()}>
        <thead>
          {headerGroups.map(headerGroup => (
            <tr {...headerGroup.getHeaderGroupProps()}>
              {headerGroup.headers.map(column => (
                <th {...column.getHeaderProps()}>{column.render('Header')}</th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody {...getTableBodyProps()}>
          {rows.map((row, i) => {
            prepareRow(row)
            return (
              <tr {...row.getRowProps()}>
                {row.cells.map(cell => {
                  return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
                })}
              </tr>
            )
          })}
        </tbody>
      </table>
    )
}

uncaught Error: Objects are not valid as a React child (found: object with keys {key, value}). If you meant to render a collection of children, use an array instead

question from:https://stackoverflow.com/questions/65601869/pass-key-to-table-cell

Answer 1

Waitting for answers