loading...

How can I loop over this object in React?

kayut profile image Kayut ・1 min read

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;

Discussion

pic
Editor guide
Collapse
pdlozano profile image
David Lozano

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:

function TinTinTile() {
  const list = jsonResponse.characters.map((item, index) => {
    return (
      <li className="list-container" key={index}>
          <img
            className="image-container"
            src={item.image_url}
            alt="kir"
          />
          <div className="text-container">
            <h4>Name: {item.name}</h4>
            <p>Job: {item.job}</p>
            <p>Age: {item.details.age}</p>

            <button className="btn">More details ...</button>
          </div>
        </li>
    );
  });

  return (
    <ul id="container" className="cf">
      {list}
    </ul>
  );
}
Collapse
kayut profile image
Kayut Author

Great! Thanks a lot.