how to render an array of JSX using .map in react

Question

I have an array of objects like the following:

const features = [
{
        name: "Sponsor Block",
        images: [sponsorBlock1, sponsorBlock2],
        data: [
            `Uses the API found ${<a href='example.com/'>here</a>}. You can find more information on how it works`,
            "Lorem ipsum ........"
        ],
    },
]

In the first point you can see that I am using a template string to inject JSX (I'm not sure if this is the right way to do this)

I want to map (loop) over the features array and display the first point with the anchor tag in it, and the other points that are just text as normal text.

But when I loop over the data key in the first object I get this displayed in my JSX-> [Object][Object]

Is there a way how I can solve this while still keeping it inside the array?

Answer 1

Why not simply An array of fragment components

data:[
    <>Uses the API found <a href='example.com/'>here</a>. You can find more information on how it works</>,
    <>Lorem ipsum ........</>
]

Then when you render do:

return (
    <ul>
        {features.data.map((d,i)=><li key={i}>{d}</li>}
    </ul>
)

Answer 2

const features = [ { name: "Sponsor Block", images: [sponsorBlock1, sponsorBlock2], data: [ `Uses the API found <a href='example.com/'>here</a>. You can find more information on how it works`, "Lorem ipsum ........" ], }, ] features.map(feature => { return <div dangerouslySetInnerHTML={{ __html: feature.data }} /> })