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)