EN VI

Reactjs - Is it overkill this use of map function to reduce code?

2024-03-09 23:00:25
Reactjs - Is it overkill this use of map function to reduce code?

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>
  )
}

Solution:

Donald Knuth said that premature optimization is the root of all evil. So, first developers' goal is create a code that is easy to read and change.

map avoids duplication, and easier to read than for cycle. So, it is a good option.

Answer

Login


Forgot Your Password?

Create Account


Lost your password? Please enter your email address. You will receive a link to create a new password.

Reset Password

Back to login