Objects are not valid as a React child error in React Datatable

Question

OK, so Im getting this error when trying to return some data from my web api. Ive tried all as suggested on other similar posts but cant get this working. Any help appreciated.

Objects are not valid as a React child. If you meant to render a collection of children, use an array instead.

clg(records) returns this:

[{
   id:1,
   Listing: {id: 2, title: 'Testtt'},
   ListingId: 2
},
{
   id:2,
   Listing: {id: 3, title: 'hell world'},
   ListingId: 3
}]

here is my reactjs code:

class Products extends Component {

    constructor(props) {
        super(props);

        this.columns = [
            {
                key: "id",
                text: "Id",
                className: "id",
                align: "left",
                sortable: true,
            },
            {
                id:"ListingId"
                text: "Merchant ID",
                className: "name",
                align: "left",
                sortable: true,
            },
            
            }
        ];

       

        this.state = {
            records: []
        };

        this.getData = this.getData.bind(this);

    }

    componentDidMount() {
        this.getData()
    };

    componentWillReceiveProps(nextProps) {
        this.getData()
    }

    getData() {
        axios
            .get("/api/products")
            .then(res => {
                this.setState({ records: res.data})
            })
            .catch()
    }

    
    render() {
        const {records}=this.state;
        console.log(records);
        
        return (
            <div>
                            <ReactDatatable
                                records={this.state.records}
                                columns={this.columns}
                                loading='true'
                            />
                        </div>
        );
    }}

Currently its displaying ListingId in the column, how can i display the Listing title instead?

i am currently using this package :

https://www.npmjs.com/package/@ashvin27/react-datatable

are you using this as data table? https://www.npmjs.com/package/react-data-table-component — omer.ersoy, Jun 21 '22 at 11:07
Can you please share the package you are using for your table if any? — Devon Ray, Jun 21 '22 at 11:08
Looks like it doesn't have any selectors like the one I've shared. Maybe you should iterate over your response data and destruct it the way you want. Because it's nested. — omer.ersoy, Jun 21 '22 at 11:40
@omer.ersoy i iterated over the array and got the individual objects but how do i display the title instead of the id ? — kd12345, Jun 21 '22 at 11:49
after you got your array like [{id: 2, title: "some title"}, {id: 3, title: "some other title"}] all you have to do is changing your columns config with the "title" as a key. Now it just have 2 columns and they're listingId and id. — omer.ersoy, Jun 21 '22 at 11:54
@omer.ersoy it only allows me to add column that is a parent with no child, like ListingId. — kd12345, Jun 21 '22 at 12:19

score 1 · Accepted Answer · answered Jun 21 '22 at 12:30

Here is the solution to my question

 {                                
    key:'ListingId',
    text: "Column Title",
    className: "name",
    align: "left",
    sortable: true,
    cell: record => {
           console.log(record)
           return (
           <span>{record.Listing.title}</span>)
           }
},

Objects are not valid as a React child error in React Datatable

1 Answers1