Is it possible to add a JSX element to a template string that is within an array of objects?-CodePudding

I'm trying to add JSX elements like <a>, <p> and else to an array of objects in a template string, this project has a portfolio.jsx file that holds the array, another file called Projects.jsx that maps the array, and a ProjectsItem.jsx that holds all the jsx and props to display the data.

export default [
   {
    title: "Tenzies Game",
    imgUrl: "images/projects/tenziesgamepreview.png",
    description: `This is the final Capstone Project for ${theJSXelement}
    that teached me a lot about React, everything from props, state, making API calls, useEffects,
    React forms, and more!`,
    stack: [reactLogo, sassLogo],
    link: "https://fredtenziesgame.netlify.app/",
    codeLink: "https://github.com/fred-gutierrez/tenzies-game",
  }
]

As shown above, I'm trying to add it within the description object template string, but when trying to do so, it gives me either the stringified object or [object, Object], which is displayed on the object.

I tried putting a const with the JSX element outside the array, like this:

const newJSXelement = (<a href="https://scrimba.com/learn/learnreact" target="_blank">
    Learn React for free
  </a>)

export default [
   {
    title: "Tenzies Game",
    imgUrl: "images/projects/tenziesgamepreview.png",
    description: `This is the final Capstone Project for ${theJSXelement}
    taughtached me a lot about React, everything from props, state, making API calls, useEffects,
    React forms, and more!`,
    stack: [reactLogo, sassLogo],
    link: "https://fredtenziesgame.netlify.app/",
    codeLink: "https://github.com/fred-gutierrez/tenzies-game",
  }
]

And i tried inserting it it inline

${(<a href="https://scrimba.com/learn/learnreact" target="_blank">
    Learn React for free
  </a>)}

, it gives me [object, Object] or the stringified element with all the specific types and details.

I'm fairly new in React so I'm unsure if this is even posible, but if anything, I'm very thankful if anyone is able to help me out with this situation, thanks!

Just in case, the GitHub repository for this project is: https://github.com/fred-gutierrez/React-Portfolio

CodePudding user response：

It can be done by adding a div for the description. Hope it maybe helpful.

export default [
{
  title: "Tenzies Game",
  imgUrl: "images/projects/tenziesgamepreview.png",
  description: <div>This is the final Capstone Project for {theJSXelement}
  that teached me a lot about React, everything from props, state, making 
  API calls, useEffects,
  React forms, and more!</div>,
  stack: [reactLogo, sassLogo],
  link: "https://fredtenziesgame.netlify.app/",
  codeLink: "https://github.com/fred-gutierrez/tenzies-game",
}
]