Trying to render a link within a string, within JSX

Question

I'm trying to render a link, which is found in an array of objects with properties and values.

const arr = [
  {
    id: 1,
    title: "This is a title",
    body: [
      "This is some stuff. Lorem ipsum, lorizzle for shizzle.",
      "Click here to send an <Link to="mailto:[email protected]">email</Link>"
    ]
  },
  {
    id: 2,
    title: "This is another title",
    body: [
      "Moar stuff.",
      "Here is ma' <Link to="mailto:[email protected]">email</Link>"
    ]
  }
]

I'm using this logic to map through the array's objects and store them inside an array of components. This works as intended, if all I'm intending to do is just render some text in a paragraph. When it comes to links, simply this won't work. My guess is that React takes the string for text, and renders the entire thing as text. It doesn't care of the contents.

            <section key={item.key} className="">
                <h2 className="text-base">{item.title}</h2>
                {
                    item.body.map(function(paragraph) {
                        return(
                            <p className="text-sm">{paragraph}</p>
                        )
                    })
                }
            </section>

I've tried enclosing the Link tags within curly braces, to concatenate the string and email (as it would appear in the HTML), string template literals. Nothing worked.

I'm not sure there is a dependency I'm missing or a step. Perhaps the approach I'm taking is wrong? Maybe what I'm trying to do is impossible in React?

Would appreciate some light shed on this matter.

Answer 1

This would be a very naive approach to transfering jsx within array.

const arr = [
  {
    id: 1,
    title: "This is a title",
    body: [
      ["This is some stuff. Lorem ipsum, lorizzle for shizzle."],
      ["Click here to send an ", <Link to="mailto:[email protected]">email</Link>"]
    ]
  },

item.body.map(function(paragraph) {
    const content = paragraph.reduce((combined, elem) => {
        return content + elem;
    });

    return(
        <p className="text-sm">{paragraph}</p>
    )
});