Uncaught Error: Objects are not valid as a React child while using react-bootstrap-table-next

Question

I have a React component where I am trying to render a table using the react-bootstrap-table-next library. I'm getting an error:

Uncaught Error: Objects are not valid as a React child

Issue: The array that I am passing has a property which is an object itself. Where <BootstrapTable> can take only string as property. If you look at the screenshot of the console.log(todos) , it shows the dueDate property is an object instead of string .

Tried:

const columns = [
    { dataField: 'title', text: 'Title'},
    { dataField: 'description', text: 'Description' },
    { dataField: 'dueDate', text: 'Due Date' }
  ];

return (
        <div>
           <BootstrapTable 
            keyField= 'id'
            data={todos}
            columns={columns}
           />
        </div>
    );

When I try to enter some data, todos are console.log like below:

Problem: Nothing renders inside the BootstrapTable component.

Answer 1

The issue with <BootstrapTable> is that it doesn't take object as one of its property value . It has to be string :

In my component, the onFormSubmit method had a date as new Date() . But that is just a Date object . So it needed parsing with JSON Serializer .

Solution

dueDate: JSON.parse(JSON.stringify(dueDate))

Source :

 var date = new Date(); console.log(date); // Wed Jan 01 2014 13:28:56 GMT-1000 (Hawaiian Standard Time) var json = JSON.stringify(date); console.log(json); // "2014-01-01T23:28:56.782Z"

...

 // JSON encoded date var json = "\"2014-01-01T23:28:56.782Z\""; var dateStr = JSON.parse(json); console.log(dateStr); // 2014-01-01T23:28:56.782Z var date = new Date(dateStr); console.log(date); // Wed Jan 01 2014 13:28:56 GMT-1000 (Hawaiian Standard Time)