I am using React for my app, I am fetching data from an API at http://localhost:8080/api/suppliers/supplier/list
Here is the data structure that I am getting in the Google Chrome console:
0:{ id: 4 supplierFirstname: "Tom" supplierLastName: "ABC" supplierTitle: "TomTheSupplier" accountNumber: 1122234444 address: "111 ADrive, 1234 ST." companyName: "TheTom Company & Associates" email: "[email protected]" hourlyRate: 29 phoneNumber: 123456789 otherPhoneNumber: 1023456789 paymentTerms: "Credit" notes: "Some Supplier" createdAt: null typeOfGoods: "Supplies" website: "www.abc_123.com" products: [{…}] components: [ 0: {id: 5, name: "AComponent", unit: null, quantity: 0, componentCost: 0, …} ] } Here is my code:
class SupplierData { constructor(props){ super(props); this.state = { supplier: [ { id: 0, supplierTitle: "Supplier Title", supplierFirstName: "First Name", supplierLastName: "Last Name", accountNumber: 1122234444, address: "", companyName: "", email: "[email protected]", hourlyRate: 29, phoneNumber: 123456789 otherPhoneNumber: 1023456789 paymentTerms: "Credit" notes: "Some Supplier" createdAt: null typeOfGoods: "Supplies" website: "www.abc_123.com" products: [{…}] components: [ 0: {id: 5, name: "AComponent", unit: null, quantity: 0, componentCost: 0, …} ] }, ], errorMessage: [], }; } ListAllSuppliers = async () =>{ return await axios.get(`http://localhost:8080/api/suppliers/supplier/list`) .then((response) =>{ let apiResults = response.data; this.setState({supplier: apiResults}); }).catch((error) =>{ this.setState({errorMessage: this.state.errorMessage.push(error)}); }); } TableRow = ({id, supplierTitle, supplierFirstName, supplierLastName}) => { return ( <tr> <td> <span className="fw-normal"> {id} </span> </td> <td> <span className="fw-normal"> {supplierTitle} </span> </td> <td> <span className="fw-normal"> {supplierFirstName} </span> </td> <td> <span className="fw-normal"> {supplierLastName} </span> </td> </tr> ); }; render(){ return( <table> <thead> <tr> <th className="border-bottom">#ID</th> <th className="border-bottom">Title</th> <th className="border-bottom">FirstName</th> <th className="border-bottom">LastName</th> </tr> </thead> <tbody> {this.state.supplier.map((t) => this.TableRow(t))} </tbody> </table> ); } I am getting the following error, here is what it states:
Error: Objects are not valid as a React child (found: object with keys {id, name, productComponents, quantity, productCost, productPrice, createdAt, status}). If you meant to render a collection of children, use an array instead. in span (at SupplierData.js:158) in td (at SupplierData.js:157) in tr (at SupplierData.js:78) in tbody (at SupplierData.js:259) why is it pointing out such error .
My Question:
What is a possible fix to the above error ?
