React: Iterate over object, find array, and display array items - arrays

Question

I'm trying to iterate over an object being return by the axios call to "/Home/NewsNotes".
Response from Axios
I'm able to display the property names to the screen, but I'm having issues accessing the "NewsNotes" array.
Here's my code for my component.
class ReleaseDetailsComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
releaseNotes: {}
};
}
componentDidMount() {
var _this = this;
const urlParams = new URLSearchParams(window.location.search);
const currCatId = urlParams.get('categoryId');
axios.get('/Home/NewsNotes?categoryId=' + currCatId)
.then(response => _this.setState(
{ releaseNotes: response.data }
))
.catch(function (error) {
console.log(error);
});
console.log(currCatId);
}
render() {
return (
<section>
<div className="row">
<div className="col-sm-8 col-sm-offset-2 col-md-10 col-md-offset-1">
<h2 className="page-title tutorials"><img className="title-icon" src="/Content/images/icons/icon-release-notes.png" /> News & Release Notes</h2>
<h3>{this.state.releaseNotes.Title}</h3>
{Object.keys(this.state.releaseNotes).map(function (item, key) {
return (
<p>{item}</p>
);
})}
</div>
</div>
</section>
);
}
}
ReactDOM.render(
<ReleaseDetailsComponent />,
document.getElementById('tutorialsWrapper')
);

Answer 1

I assume the object which you retrieved from URL using axios will look like:
var releaseNotes = {
NewsNotes: [
"Buy some milk": "data 1",
"Clean kitchen": "data 2",
"Watch Netflix": "data 3"
],
NewsNotesCategoryId: 3,
SortOrder: null,
Title: "1.0.1",
TypeId: 2
};
Next, you can inject "this" into map method as follow, check for any child array, then push each JSX block into the temp array in order to return later:
{Object.keys(this.state.releaseNotes).map((key, idx) => {
var temp = [];
temp.push(<p>{key}</p>);
if (Array.isArray(this.state.releaseNotes[key])) {
this.state.releaseNotes[key].map(ckey => {
temp.push(<p>{ckey}</p>);
});
}
return temp;
}, this)}

Answer 2

You can't render an array of elements using keys. Rather map over the array and print them like this.
renderReleaseNotes() {
return _.map(this.state.releaseNotes, releaseNote => {
return (
<p>releaseNote.title</p>
);
});
}
Hope this helps. Happy coding !