Mapping and displaying Fontawesome Icons-CodePudding

Below is my ContactTopForm component.

import { 
    faMapMarkerAlt,
    faPhoneAlt,
    faEnvelope,
    faFax
} from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import React from 'react'

const ContactTopForm = () => {

    const contactInfoTop = [
    {
        icon: "faMapMarkerAlt",
        topic: "Our Location",
        content: ["SoHo 94 Broadway St New York, NY 1001"]
    },
    {
        icon: "faPhoneAlt",
        topic: "Phone Number",
        content: [" 254 700 000 000", " 254 700 000 000"]
    },
    {
        icon: "faEnvelope",
        topic: "Our Emails",
        content: ["[email protected]", "[email protected]", "[email protected]"]
    },
    {
        icon: "faFax",
        topic: "Our Location",
        content: ["SoHo 94 Broadway St New York, NY 1001"]
    }
    ]

    return (
        <div className="contact-form-top">
            <div className="contact-form-top-content">
                {contactInfoTop.map((element) => (
                    <div className="contact-form-item">
                        <FontAwesomeIcon
                            icon={element.icon}
                            className="contact-form-icon"/>
                        <h4 className="contact-form-item-h4">
                            {element.topic} 
                        </h4>
                        <div className="contact-form-item-div">
                            {element.content.map(item => (
                                <p className="contact-form-item-p">
                                    {item}
                                </p>
                            ))}
                        </div>
                    </div>
                ))}
            </div>
        </div>
    )
}

export default ContactTopForm

I am trying to map all the information from the contactInfoTop array and render them while trying to write the least amount of jsx as possible.

The problem is that all array information is displayed as planned except for the FontAwesomeIcons as shown below enter image description here

I doubt that the problem is here

  <FontAwesomeIcon
      icon={element.icon}
      className="contact-form-icon"/>

How should I write it??

CodePudding user response：

What you can do is:

Instead writing icon as a string value, you can pass the icon name which are importing from @fortawesome/free-solid-svg-icons.

So your code should look like:

{
  icon: faFax, // icon name not string
  topic: "Our Location",
  content: ["SoHo 94 Broadway St New York, NY 1001"]
}

Here is the working solution of your problem:

import {
    faMapMarkerAlt,
    faPhoneAlt,
    faEnvelope,
    faFax
} from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import React from 'react'

const ContactTopForm = () => {

    const contactInfoTop = [
        {
            icon: faMapMarkerAlt,
            topic: "Our Location",
            content: ["SoHo 94 Broadway St New York, NY 1001"]
        },
        {
            icon: faPhoneAlt,
            topic: "Phone Number",
            content: [" 254 700 000 000", " 254 700 000 000"]
        },
        {
            icon: faEnvelope,
            topic: "Our Emails",
            content: ["[email protected]", "[email protected]", "[email protected]"]
        },
        {
            icon: faFax,
            topic: "Our Location",
            content: ["SoHo 94 Broadway St New York, NY 1001"]
        }
    ]

    return (
        <div className="contact-form-top">
            <div className="contact-form-top-content">
                {contactInfoTop.map((element) => (
                    <div className="contact-form-item">
                        <FontAwesomeIcon
                            icon={element.icon}
                            className="contact-form-icon" />
                        <h4 className="contact-form-item-h4">
                            {element.topic}
                        </h4>
                        <div className="contact-form-item-div">
                            {element.content.map(item => (
                                <p className="contact-form-item-p">
                                    {item}
                                </p>
                            ))}
                        </div>
                    </div>
                ))}
            </div>
        </div>
    )
}

export default ContactTopForm

You can read more in this link.