Hi,
I'm learning React. In the following component, I import a JS file (data.js), which looks like a JSON file which includes an object.
Inside the return of the TinTinTile class, I use that object to display all data.
In my example bellow, I can only display the first array in the object. But I need a way to loop over the array jsonResponse.characters.
Now my question is:
How can I loop over jsonResponse.characters?
import React, { Component } from 'react';
import jsonResponse from './data';
console.log(jsonResponse);
// const ArrayLength = jsonResponse.characters.length;
// console.log(ArrayLength);
// jsonResponse.characters.foEach(function(i) {
// console.log(i);
// });
class TinTinTile extends Component {
state = {};
render() {
return (
<ul id="container" className="cf">
<li className="list-container">
<img
className="image-container"
src={jsonResponse.characters[0].image_url}
alt="kir"
/>
<div className="text-container">
<h4>Name: {jsonResponse.characters[0].name}</h4>
<p>Job: {jsonResponse.characters[0].job}</p>
<p>Age: {jsonResponse.characters[0].details.age}</p>
<button className="btn">More details ...</button>
</div>
</li>
</ul>
);
}
}
export default TinTinTile;
Top comments (2)
Use the
map()
Function. Also, there’s no need to use Component. Use functional components instead if you don’t need state. Here’s the full code:Great! Thanks a lot.