Discussion on: How can I loop over this object in React?

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

[Kayut]

Great! Thanks a lot.