A continuación se muestra mi componente ContactTopForm.
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 ContactTopFormEstoy tratando de mapear toda la información de la matriz contactInfoTop y representarla mientras trato de escribir la menor cantidad de jsx posible.
El problema es que toda la información de la matriz se muestra según lo planeado, excepto los FontAwesomeIcons, como se muestra a continuación. Ingrese la descripción de la imagen aquí .
dudo que el problema este aqui
<FontAwesomeIcon icon={element.icon} className="contact-form-icon"/>como debo escribirlo??
Lo que puedes hacer es:
En lugar de escribir el icono como un valor de cadena, puede pasar el nombre del icono que se está importando desde @fortawesome/free-solid-svg-icons .
Entonces su código debería verse así:
{ icon: faFax, // icon name not string topic: "Our Location", content: ["SoHo 94 Broadway St New York, NY 1001"] }Aquí está la solución de trabajo de su problema:
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 ContactTopFormPuedes leer más en este enlace .