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

export default [
   {
    title: "Tenzies Game",
    imgUrl: "images/projects/tenziesgamepreview.png",
    description: `这是我的最终毕业项目，${theJSXelement}教会了我很多关于React的知识，包括props、state、API调用、useEffect、React表单等等！`,
    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 to the template string of the description object, but when trying to do that, it either returns me a stringified object or displays [object, Object].

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

const newJSXelement = (<a href="https://scrimba.com/learn/learnreact" target="_blank">
    免费学习React
  </a>)

export default [
   {
    title: "Tenzies Game",
    imgUrl: "images/projects/tenziesgamepreview.png",
    description: `这是我的最终毕业项目，${theJSXelement}
    教会了我很多关于React的知识，包括props、state、API调用、useEffect、React表单等等！`,
    stack: [reactLogo, sassLogo],
    link: "https://fredtenziesgame.netlify.app/",
    codeLink: "https://github.com/fred-gutierrez/tenzies-game",
  }
]

I tried inserting it inline

${(<a href="https://scrimba.com/learn/learnreact" target="_blank">
    免费学习React
  </a>)}

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

I'm relatively new to React, so I'm not sure if this is possible, but if there's anything wrong, I'd really appreciate anyone who can help me figure this out, thank you!

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