1

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

kd12345
  • 689
  • 10
  • 29
  • 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
  • @omer.ersoy i have updated my code with the package used – kd12345 Jun 21 '22 at 11:30
  • @DevonRay i have updated my code with the package used – kd12345 Jun 21 '22 at 11:31
  • 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

1 Answers1

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>)
           }
},
kd12345
  • 689
  • 10
  • 29