ReactJs : Any idea on how to improve this code

Pierre — Tue, 27 Oct 2020 00:46:51 +0000

Hi all !

I'm learning ReactJs and i'm working on a simple component for my website, I want to display icons from font-awsome, i did something like this :

import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import {faJs, faHtml5, faCss3Alt} from '@fortawesome/free-brands-svg-icons'

function IconTech (props) {

    return (
        <div className="square">
            {props.icon === "faJs" &&
                <FontAwesomeIcon icon={faJs} className={"icon " + props.color} size="5x" />
            }
            {props.icon === "faHtml5" &&
                <FontAwesomeIcon icon={faHtml5} className={"icon " + props.color} size="5x" />
            }
            {props.icon === "faCss3Alt" &&
                <FontAwesomeIcon icon={faCss3Alt} className={"icon " + props.color} size="5x" />
            }
            <div className={props.color}>{props.title}</div>
        </div>
    );
}


export default IconTech;

My first attempt was this, but it wasn't working :

import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import {faJs, faHtml5, faCss3Alt} from '@fortawesome/free-brands-svg-icons'

function IconTech (props) {

    return (
        <div className="square">
        <FontAwesomeIcon icon={props.icon} className={"icon " + props.color} size="5x" />
            <div className={props.color}>{props.title}</div>
        </div>
    );
}

export default IconTech;

Any suggestions ?

Thanks !

DEV Community: Pierre

ReactJs : Any idea on how to improve this code