Reactjs template literal in map not working as expected

HELP

I am trying to use template literals but its not working as expected

import React from 'react'

function NameList() {
    //const names = ['Bruce','Clark','Diana']
    const persons = [
        {
          id: 1,
          name: 'Bruce',
          age: 30,
          skill: 'React'
        },
        {
          id: 2,
          name: 'Clark',
          age: 25,
          skill: 'Angular'
        },
        {
          id: 3,
          name: 'Diana',
          age: 28,
          skill: 'Vue'
        }
      ]
      const personList = persons.map((person) => <h2>`I am ${person.name}. I am ${person.age} years old. I know ${person.skill}`</h2>)
    return (
        <div>
            {personList}
        </div>
    )
}

export default NameList

Gives me I am $Bruce. I am $30 years old. I know $React… but why isn’t ${} registering as javascipt? Is it because of react?
I am expecting “I am Bruce. I am 30 years old. I know React” and so on

You have to make sure that what’s contained in your <h2> tag is JavaScript for template literals to work. For example:

<p>{`I am ${myAge} years old`}</p>
1 Like