Responsive four-card landing page with pure css

Community feedback

• 

  Pattaraporn Tulathum•200

  @rainofPosted 4 months ago

  Great job! To resolve the issue of displaying different icons in each box, you should use the map function to iterate and display them. Here’s how you can do it:

  1.Create an Array of Image Paths:

  const image_files = [
    'images/icon-1.svg',
    'images/icon-2.svg',
    'images/icon-3.svg',
    'images/icon-4.svg'
  ];
  

  2.Use map to Loop Through Each Topic:

  {topics.map((topic, index) => (
    <div key={index} className={`sub_topic sub_topic-${index % image_files.length}`}>
      <div className="topic_name">{topic.name}</div>
      <p className="topic_description">{topic.description}</p>
      <img
        src={image_files[index % image_files.length]}
        alt={`icon-${index + 1}`}
      />
    </div>
  ))}
  

  This method ensures that each topic box displays a different icon by cycling through the images in the image_files array.

  0