Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

384
Visualizações
Mapping and displaying Fontawesome Icons

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: ["email1@mail.com", "email2@mail.com", "email3@mail.com"]
    },
    {
        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??

about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

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: ["email1@mail.com", "email2@mail.com", "email3@mail.com"]
        },
        {
            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.

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda