How can I loop over this object in React?

#react #loop #json

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)

David Lozano • Jan 15 '19

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>
  );
}

Kayut • Jan 15 '19

Great! Thanks a lot.

DEV Community

How can I loop over this object in React?

Top comments (2)

Read next

Building a Modern React Library Starter: A Comprehensive Guide

Design Powerful Dashboards with These Must-Have Next.js Admin Templates

The React `useInsertionEffect` Hook

Modular React architecture