DEV Community

How can I loop over this object in React?

Kayut on January 15, 2019

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 t...
Read full post
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 •

Great! Thanks a lot.