Display the specfied list in frontend - reactjs

Question

Goal:
Display the content of listGetAllIndustry in frontend.
Problem:
"Error: Objects are not valid as a React child (found: object with keys {listGetAllJobAdvertisement, listGetAllLocation, listGetAllIndustry}). If you meant to render a collection of children, use an array instead."
What part of the code am I missing in order to display the content of listGetAllLocation at frontend?
Info:
*I'm new in React JS
Thank you!
{"listGetAllJobAdvertisement":[],"listGetAllLocation":[{"locationId":1,"city":"LOS ANGELES","country":"USA"},{"locationId":2,"city":"LONDON","country":"ENGLAND"},{"locationId":3,"city":"BERLIN","country":"GERMANY"}],"listGetAllIndustry":[{"industryId":1,"name":"ENERGY"},{"industryId":2,"name":"MATERIALS"},{"industryId":3,"name":"INDUSTRIALS"},{"industryId":4,"name":"CONSUMER STAPLES"},{"industryId":5,"name":"HEALTH CARE"},{"industryId":6,"name":"FINANCIALS"},{"industryId":7,"name":"INFORMATION TECHNOLOGY"},{"industryId":8,"name":"COMMUNICATION SERVICES"},{"industryId":9,"name":"UTILITIES"},{"industryId":10,"name":"REAL ESTATE"}]}
import { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import { VacantPositions } from '../../src/contexts/api';
class Open extends Component {
state = { aaa: [] };
componentDidMount() {
fetch(VacantPositions)
.then(results => results.json())
.then(data => this.setState({ aaa: data } ))
.catch(err => console.log(err))
}
render() {
return (
<div>
{ this.state.aaa}
</div>
);
}
}
export default Open;

Answer 1

You see this error since you are directly using state variable aaa in render function's return statement without telling react how to convert the aaa variable into JSX.
I have included aaa and and 1 more variable bbb. Depending upon what you want you can keep 1 variable remove the other one and its corresponding usage from your Open component.
import { Component } from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
class Open extends Component {
state = {
// state variable should be object if api response is object
aaa: {},
// if you only store 'listGetAllIndustry' then state variable should be array
bbb: []
};
componentDidMount() {
// I am assuming the api response to be this
const data = {
listGetAllJobAdvertisement: [],
listGetAllLocation: [
{ locationId: 1, city: "LOS ANGELES", country: "USA" },
{ locationId: 2, city: "LONDON", country: "ENGLAND" },
{ locationId: 3, city: "BERLIN", country: "GERMANY" }
],
listGetAllIndustry: [
{ industryId: 1, name: "ENERGY" },
{ industryId: 2, name: "MATERIALS" },
{ industryId: 3, name: "INDUSTRIALS" },
{ industryId: 4, name: "CONSUMER STAPLES" },
{ industryId: 5, name: "HEALTH CARE" },
{ industryId: 6, name: "FINANCIALS" },
{ industryId: 7, name: "INFORMATION TECHNOLOGY" },
{ industryId: 8, name: "COMMUNICATION SERVICES" },
{ industryId: 9, name: "UTILITIES" },
{ industryId: 10, name: "REAL ESTATE" }
]
};
// fetch(VacantPositions)
// .then(results => results.json())
// .then(data => this.setState({ aaa: data } ))
// .catch(err => console.log(err))
this.setState({
// keeping complete api response in the state
aaa: data || {},
// keeping only 'listGetAllIndustry' from api response in the state
bbb: data.listGetAllIndustry || []
});
}
render() {
return (
<div>
{this.state.aaa.listGetAllIndustry &&
this.state.aaa.listGetAllIndustry.map((industry) => {
return (
<div key={industry.industryId}>
<span>{industry.industryId}.</span>
<span>{industry.name}</span>
</div>
);
})}
===================================
{this.state.bbb.map((industry) => {
return (
<div key={industry.industryId}>
<span>{industry.industryId}.</span>
<span>{industry.name}</span>
</div>
);
})}
</div>
);
}
}
export default Open;

Answer 2

Your api is returning objects with multiple key and values you're setting that object into the state called 'aaa' , so you can't directly render a object in the return part you can render only particular value in the return method . You can use object.entries.map
{Object.keys(this.state.aaa).map(function(key, index) {
return (
<p>{key}</p>
<p>{index}</p>
)
})};
or you can specify the particular value like
render() {
return (
<div>
{ this?.state?.aaa?.listGetAllLocation[0]?.city}
</div>
);}