hola a todos estoy en problemas aqui mi codigo
Solo quiero usar íconos de reacción en mi proyecto sin hacer otras cosas
Solo muestro íconos en cada dato que se está desgarrando
así { <${e.contact.icons}/> } lo que estoy haciendo en el código
import { FaBeer, Fa500Px, FaAccusoft } from "react-icons/fa"; // here is data for I want to show const data = [ { contact: [ { title: "contact", subtitle: "get in touch", icons:"FaBeer", }, { title: "contact", subtitle: "get in touch", icons:"Fa500Px", }, { title: "contact", subtitle: "get in touch", icons:"FaAccusoft", }, ], }, ]; const contact = () => { return ( <> {data.map((e, i) => { return ( <> <div className="text-area"> <h1 className="title">{e.contact.title}</h1> <h2 className="subtitle">{e.contact.subtitle}</h2> <span> {`<${e.contact.icons}/>`} </span> </div> </> ); })} </> ); }; export default contact; { <${e.contact.icons}/> } este tipo de método no funciona, devuelve exterior como este en el navegador
<FaBeer/> <Fa500Px/> <FaAccusoft/>aquí los íconos no se muestran ¿debería hacerlo?
No puede usar cadenas para representar los tipos de componentes de React, sino que puede usar el propio ComponentType importado.
import { FaBeer, Fa500Px, FaAccusoft } from "react-icons/fa"; // here is data for I want to show const data = [ { contact: [ { title: "contact", subtitle: "get in touch", icons: FaBeer, }, { title: "contact", subtitle: "get in touch", icons: Fa500Px, }, { title: "contact", subtitle: "get in touch", icons: FaAccusoft, }, ], }, ]; const Contact = () => { return ( <> {data.map((e, i) => { const Icon = e.contact.icons; return ( <> <div className="text-area"> <h1 className="title">{e.contact.title}</h1> <h2 className="subtitle">{e.contact.subtitle}</h2> <span><Icon /></span> </div> </> ); })} </> ); }; export default Contact; Observe cómo cambia también la representación de Icon
También puede usar Parser() desde html-react-parser. https://github.com/remarkablemark/html-react-parser
const parse = require('html-react-parser'); {parse(`<${e.contact.icons}/>`)};https://codesandbox.io/s/fervent-goldwasser-y83cn?file=/src/App.js
import { FaBeer, Fa500Px, FaAccusoft } from "react-icons/fa"; // here is data for I want to show const data = [ { contact: [ { title: "contact", subtitle: "get in touch", icons: FaBeer }, { title: "contact", subtitle: "get in touch", icons: Fa500Px }, { title: "contact", subtitle: "get in touch", icons: FaAccusoft } ] } ]; const contact = () => { return ( <> {data.map((e, i) => { return ( <> {e.contact.map((e, i) => { return ( <div className="text-area" key={i}> <h1 className="title">{e.title}</h1> <h2 className="subtitle">{e.subtitle}</h2> <span> <e.icons /> </span> </div> ); })} </> ); })} </> ); }; export default contact;