react table v6, Objects are not valid as a React child

Question

I have a response from the API like this, https://codebeautify.org/jsonviewer/cbbfa709

why in react table v6 there is an error like this " Error: Objects are not valid as a React child (found: object with keys {branchStock, product, lastOrder, productFocusId, qtySuggestion, orderQuantity}). If you meant to render a collection of " ?

even though the accessor name is in accordance with the object properties, how to solve this problem?

"react-table-v6": "^6.8.6"

this is my state

const [state, setState] = useState({
    isLoading: true,
    tab: 'tab-1',
    productFocus: []
  })

success function to set state

 success => {
        const { data: { items } } = success.data
        setState(prevState => {
          return {
            ...prevState,
            productFocus: items.map((list) => {
              return Object.assign({}, {
                branchStock: list.branchStock,
                product: list.product,
                lastOrder: list.lastOrder,
                productFocusId: list.productFocusId,
                qtySuggestion: list.qtySuggestion,
                orderQuantity: 0
              })
            }),
            isLoading: false
          }
        })
      },

this is my table component

 {state.tab === "tab-1" ?
    <>
      <div className="my-5">
           {state.isLoading ? (<p>loading ...</p>) : (
            <Table
               data={state.productFocus}
               type='productFocus'
               dataListLength={10}
               showPagination={false}
            />
         )}
     </>
   }

this is my cell

productFocus: [
      {
        Header: 'JKN',
        accessor: '',
        sortable: false,
        headerStyle,
        className: 'column-odd',
      },
      {
        Header: 'Product Name',
        accessor: 'product.productName',
        sortable: false,
        headerStyle,
        className: 'column-odd',
        Cell: ({ row, original }) => {
          console.log('ori', original)
          return <p>tes</p>
        }
      },
      {
        Header: 'Price',
        accessor: 'product.hnaPrice',
        sortable: false,
        headerStyle,
        className: 'column-odd',
      },
      {
        Header: 'Promo',
        accessor: '',
        sortable: false,
        headerStyle,
        className: 'column-odd',
      },
      {
        Header: 'Branch Stock',
        accessor: 'branchStock',
        sortable: false,
        headerStyle,
        className: 'column-odd',
      },
      {
        Header: 'Quantity Suggestion',
        accessor: 'qtySuggestion',
        sortable: false,
        headerStyle,
        className: 'column-odd',
      },
      {
        Header: 'Order Quantity',
        accessor: '',
        sortable: false,
        headerStyle,
        className: 'column-odd',
      },
      {
        Header: 'SubTotal',
        accessor: '',
        sortable: false,
        headerStyle,
        className: 'column-odd',
      },
    ]

on other pages the table works well with different data according to the response from the API

<Table
   data={state.lastSummaryByOutlet.collection}
   type='infoPaidCollection'
   dataListLength={10}
   showPagination={false}
/>

infoPaidCollection: [
      {
        Header: 'No Invoice',
        accessor: 'invoiceNo',
        sortable: false,
        headerStyle,
        className: 'column-event'
      },
      {
        Header: 'Amount',
        accessor: 'amount',
        sortable: false,
        headerStyle,
        className: 'column-odd',
        Cell: ({ original }) => `Rp ${toCurrency(original.amount)}`
      }
  ],

your `setState` call changes the `data` from Header + Cell, etc (react-table data) to something totally different. did you mean to do this? (`productFocus` changes from initial data to something totally different) — azium, Jul 05 '21 at 22:34
Yes, that's right, I want the response from the API to be displayed in the table — Muhamad Rahmat Setiawan, Jul 05 '21 at 22:40
well obviously you can't change the shape that's expected as the `data` prop. you need to map the data accordingly. shouldn't `data` and `columns` be separate props? — azium, Jul 05 '21 at 22:51
but previously I have managed to display the list to another table, I think there are 10 tables that have succeeded with the same concept — Muhamad Rahmat Setiawan, Jul 05 '21 at 22:53
you mean another react-table table ? can you show one of these other tables that does work? — azium, Jul 05 '21 at 22:54
yes, that's right, on other pages the table works well with different data according to the response from the API — Muhamad Rahmat Setiawan, Jul 05 '21 at 22:56
can anyone provide a solution for my problem in codesandbox ? — Muhamad Rahmat Setiawan, Jul 05 '21 at 23:09

react table v6, Objects are not valid as a React child

0 Answers0