DRY - Don't Repeat Yourself Coding Example

I am currently in the process of converting this website from using Gatsby.js to Next.js …which is a fun challenge for me as I enjoy working with both frameworks but have spent more time working with Next these days. I even have a video showing how I converted a simple create-react-app to Next that you can watch for more info.

I'll share more details of the what and why for this conversion, but I thought I would give you a quick example of the rule DRY…don't repeat yourself…in code to make things easier for future you, or me in this case.

Updating your old code and think DRY

On the homepage, I have three benefits listed in hiring me for your project and each of them have an icon to represent each benefit. Let's take a look at the code to display each icon.

          {/* 
             
            <Row> <Col> <div className="benefits-icon">
            <div className="icon-background"> <FontAwesomeIcon icon=
            {faBarcode} size="2x" /> </div> </div> </Col>
            </Row>
           */}
        

          {/* 
             
            <Row> <Col> <div className="benefits-icon">
            <div className="icon-background"> <FontAwesomeIcon icon=
            {faCodeBranch} size="2x" /> </div> </div>
            </Col> </Row>
           */}
        

          {/* 
             
            <Row> <Col> <div className="benefits-icon">
            <div className="icon-background"> <FontAwesomeIcon icon=
            {faCode} size="2x" /> </div> </div> </Col>
            </Row>
           */}
        

If you look through each column of code, you'll see the only difference is the icon name itself. The all have the same class names, div and container structure…so if I wanted to change the class name, I would have to update the code in three different places and it'll most likely be the same change, causing me to repeat myself. Let's fix that by creating a constant in javascript that just passes the unique icon name and place it in the same code structure wherever it needs to be.

Creating a reusable constant

      {/* 
        const benefitsIcon = (icon) => ( <Row> <Col> <div
        className="benefits-icon"> <div className="icon-background">
        <FontAwesomeIcon icon={icon} size="2x" /> </div>
        </div> </Col> </Row> );
       */}
    

This code above you'll notice that I created a constant, and passing a variable I named “icon” and changed the spot where the unique icon name would be to that variable of “icon”. Now we can just call that constant anywhere we need an icon, and make sure we type in the correct icon name, and then we'll be good to go.

Displaying the icon in JSX

      {/* 
        {benefitsIcon(faBarcode)}
        {benefitsIcon(faCodeBranch)}
        {benefitsIcon(faCode)}
       */}
    

Now where I need to show an icon looks like the above code, with the proper icon name and there we have it! If I need to change something like a class name, I will change it in the constant I declared above and it will affect all three spots these icons are displayed.

I put this constant inside the React component that I need it in, but we could go further and make an Icon component that could be imported and reused throughout the whole website, however I chose not to as this will be the only place on the site that is displaying an icon…for now.