@rainof
Posted
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.