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: `這是我的最終畢業(yè)項(xiàng)目,${theJSXelement}教會(huì)了我很多關(guān)于React的知識(shí),包括props、state、API調(diào)用、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"> 免費(fèi)學(xué)習(xí)React </a>) export default [ { title: "Tenzies Game", imgUrl: "images/projects/tenziesgamepreview.png", description: `這是我的最終畢業(yè)項(xiàng)目,${theJSXelement} 教會(huì)了我很多關(guān)于React的知識(shí),包括props、state、API調(diào)用、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"> 免費(fèi)學(xué)習(xí)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
Done by adding a div. Hope this helps you.
export default [ { title: "Tenzies Game", imgUrl: "images/projects/tenziesgamepreview.png", description: <div>這是{theJSXelement}的最終畢業(yè)項(xiàng)目, 它教會(huì)了我很多關(guān)于React的知識(shí),包括props、state、進(jìn)行API調(diào)用、 useEffects、React表單等等!</div>, stack: [reactLogo, sassLogo], link: "https://fredtenziesgame.netlify.app/", codeLink: "https://github.com/fred-gutierrez/tenzies-game", } ]