ReactJS - Object Keys - Nested keys/values [duplicate] - json

Question

This question already has answers here:
How do I return the response from an asynchronous call?
(41 answers)
Closed 4 years ago.
I'm trying to pull in specific values from a JSON File. I am attaching data to the component, which then gets passed through the getProjectsList function, which should then look for a specific JSON file and render that data within a list item.
This is my Component
class OpenProjectsHome extends React.Component {
constructor () {
super();
this.getProjectList = this.getProjectList.bind(this);
}
getProjectList(project) {
var projectNameFile = openProjectsData[project]
var url = window.location.protocol + "//" + window.location.host + "/open-projects/" + projectNameFile;
let clientName = "";
let projectName = "";
var startDate = "";
var component = this;
var jqxhr = $.get( url, function(myData) {
// console.log(myData)
console.log(myData[0].Client)
console.log(myData[0].Project)
console.log(myData[0].StartDate)
clientName = myData[0].Client
projectName = myData[0].Project
startDate = myData[0].StartDate
})
.fail(function() {
alert( "error" );
});
var projectURL = "project?=" + projectName;
return (
<li>
<a href={projectURL} title="">
<h6 className="eyebrow">{clientName}</h6>
<h6>{projectName}</h6>
<span><strong>Started:</strong> {startDate}</span>
</a>
</li>
)
}
render() {
return(
<section className="project-lists project-lists--current">
<div className="panel">
<div className="panel__header">
<h4 className="panel__title">Open Projects</h4>
</div>
<div className="panel__content">
<ul className="unordered-list">
{/* /////
///// WORKS
///// */}
{Object.keys(this.props.data).map(this.getProjectList)}
</ul>
</div>
</div>
</section>
);
}
}
Its rendering out the two <li> but my variables clientName, ProjectName, StartDate are all rendering as null within the return (the console.log within the $.get are working)
Any help would be greatly appreciated.

Answer 1

you should use setState and the axios and arrow function
var jqxhr =axios.get(url, (myData)=>{
// console.log(myData)
this.setState({
clientName : myData[0].Client,
projectName : myData[0].Project,
startDate = myData[0].StartDate
})
console.log(myData[0].Client)
console.log(myData[0].Project)
console.log(myData[0].StartDate)
})
.fail(function() {
alert( "error" );
});
axios doc https://github.com/axios/axios