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? npmjs.com/package/react-data-table-component — omer.ersoy
– omer.ersoy, Commented Jun 21, 2022 at 11:07
Can you please share the package you are using for your table if any? — Devon Ray
– Devon Ray, Commented Jun 21, 2022 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
– omer.ersoy, Commented Jun 21, 2022 at 11:40

kd12345 · Accepted Answer · 2022-06-21 12:30:22Z

1

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>)
           }
},

answered Jun 21, 2022 at 12:30

kd12345

8032 gold badges15 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related