El siguiente es el código que he escrito y cuando lo rendericé, item.about que tiene la etiqueta <a> , no puede renderizarlo y [object Object] se muestra en lugar de ese JSX. JSON.stringify ni siquiera lo representa.
export default function Team() { const teamList = [ { id: 1, name: "User", image: user, designation: "User", about: "He created Zoom Church LK </a>}. Apart from shipping apps, He Writes/Produces/Performs Music.", }, { id: 2, name: "User 2", image: user, designation: "User", about: `He created ${<a href="https://hanancs.github.io/ZoomChurchLK/"> Zoom Church LK </a>}. Apart from shipping apps, He Writes/Produces/Performs Music.`, }, ]; return ( <section className="leading-relaxed max-w-screen-xl mt-12 mx-auto px-4 lg:px-8 mb-20"> <div className="space-y-3 text-center"> <h1 className="text-5xl text-gray-400 font-black">Meet Our Team</h1> <p className="text-gray-500 max-w-lg mx-auto text-lg"> Focused. Improving. Data-driven. </p> </div> <div className="mt-14 gap-4 sm:grid sm:grid-cols-2 lg:grid-cols-3"> {teamList.map((item) => ( <div className="space-y-3 mt-5" key={item.id}> <div className="object-center lg:w-full rounded-lg card-zoom"> <img src={item.image} alt={item.name} /> </div> <h4 className="text-xl text-gray-400 font-bold">{item.name}</h4> <h5 className="text-lg text-gray-400 font-medium"> {item.designation} </h5> <p className="text-gray-500">{(JSON.stringify(item.about))}</p> </div> ))} </div> </section> ); }¿Cuál sería la mejor manera de modificar mi componente para poder agregar enlaces como este?
Para representar enlaces, cambie su teamList de equipo de esta manera: -
const teamList = [ { id: 1, name: "User", image: user, designation: "User", about: <>He created <a href="https://hanancs.github.io/ZoomChurchLK/"> Zoom Church LK </a>. Apart from shipping apps, He Writes/Produces/Performs Music.</>, }, { id: 2, name: "User 2", image: user, designation: "User", about: <>He created <a href="https://hanancs.github.io/ZoomChurchLK/"> Zoom Church LK </a>. Apart from shipping apps, He Writes/Produces/Performs Music.</>, }, ];y luego renderizarlo así
<p className="text-gray-500">{item.about}</p> // you have to use tags without ${} when // you want to use them in strings const teamList = [ { id: 1, name: "User", image: user, designation: "User", about: "He created <a href='https://hanancs.github.io/ZoomChurchLK'> Zoom Church LK </a>. Apart from shipping apps, He Writes/Produces/Performs Music.", }, { id: 2, name: "User 2", image: user, designation: "User", about: `He created <a href='https://hanancs.github.io/ZoomChurchLK'> Zoom Church LK </a>. Apart from shipping apps, He Writes/Produces/Performs Music.`, }, ]; // you can use dangerouslySetInnerHTML to show //html tag inside of strings. return ( {teamList.map((team) => ( <div dangerouslySetInnerHTML={{ __html: team.about }} key={team.id} /> ))} )