How can I loop over this object in React?

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;

Blog

How can I loop over this object in React?

Kayut

Join Our Newsletter. No Spam, Only the good stuff.

Related