Is that the best way to reduce code duplication? Or is it overkill? How can I optimize it? Maybe I'm doing good :)
const Programs = () => {
const programs = [{program: program_1, icon: program_icon_1, caption: "Graduation Degree"},
{program: program_2, icon: program_icon_2, caption: "Masters Degree"},
{program: program_3, icon: program_icon_3, caption: "Post Graduation"}];
return (
<div className="programs container">
{
programs.map(program => {
return (
<div className="program">
<img src={program.program} alt="Program"/>
<div className="caption">
<img src={program.icon} alt="Program icon"/>
<p>{program.caption}</p>
</div>
</div>
);
})
}
</div>
)
}