How to enable/add anchor tag to the string in ReactJS?

Question

The follwing is the code I've written and when I rendered it, item.about which has <a> tag, cannot render it and [object Object] is being displayed instead of that JSX. JSON.stringify does not even render it.

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>
   );
 }

What would be the best way to modify my component to be able to add links like this?

Answer 1

To render links change your teamList like this:-

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.</>,
    },
  ];

and then render it like this

<p className="text-gray-500">{item.about}</p>

Answer 2

 // 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} /> ))} )