Popular Articles

CULTURE

The untold history of podiums

EDUCATION

Why you should never go upstairs

HOLIDAY

Up, up and away! Say goodbye to gift-giving

We can use the map array method to render a list. Make sure to include a unique key for each item, to give it a stable identity. This is especially important if the array is updated.

ListRendering.jsx

const popularPosts = [
  {
    title: "The untold history of podiums",
    img: "https://images.pexels.com/photos/7897470/pexels-photo-7897470.jpeg",
    category: "Culture",
  },
  {
    title: "Why you should never go upstairs",
    img: "https://images.pexels.com/photos/10771000/pexels-photo-10771000.jpeg",
    category: "Education",
  },
  {
    title: "Up, up and away! Say goodbye to gift-giving",
    img: "https://img.freepik.com/free-photo/3d-balloons-present-box_23-2148993002.jpg",
    category: "Holiday",
  },
];

const ListRendering = () => {
  return (
    <>
      <DemoCont>
        <Title>Popular Articles</Title>
        {popularPosts.map((post) => (
          <Post key={post.title}>
            <Thumbnail src={post.img} alt="" />
            <div>
              <Category>{post.category.toUpperCase()}</Category>
              <PostTitle>{post.title}</PostTitle>
            </div>
          </Post>
        ))}
      </DemoCont>
    </>
  );
};

Note: Code snippets do not include styling details unless they are the focus of the exercise.