reactjsreact-data-table-component

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


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


Solution

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