0

I wanted to implement js code to my react app to the return of one of the components.
There is a simple array of objects:

    const petsData = [
    {
        name: "Purrsloud",
        species: "Cat",
        favFoods: ["wet food", "dry food", "<strong>any</strong> food"],
        birthYear: 2017,
        photo: "https://learnwebcode.github.io/json-example/images/cat-2.jpg"
    },
    {
        name: "Barksalot",
        species: "Dog",
        birthYear: 2008,
        photo: "https://learnwebcode.github.io/json-example/images/dog-1.jpg"
    },
    {
        name: "Meowsalot",
        species: "Cat",
        favFoods: ["tuna", "catnip", "celery"],
        birthYear: 2012,
        photo: "https://learnwebcode.github.io/json-example/images/cat-1.jpg"
    }
];

and what I want to do is to return 3 divs (going through 3 objects) in the return using template literals. Like so:\

 return(
    <div id="display">
       <h1 className="app-title">Pets (${petsData.length} results)</h1>
      {petsData.map(function(pets){
          return `<div></div>`
    })}
        <p className="footer"> These {petsData.length}pets were added recently.</p>
    </div>
)

}

The app doesn't see `` a displays like text.(But it iterates through objects correctly). Why is that? Why does the template literal doesn't work? How can I return div in this function?
The output: screen of the output in the app




original tutorial I was using:https://www.youtube.com/watch?v=DG4obitDvUA

Ula
  • 1
  • 3
  • Remove the backticks. You want to return an element, not a string. – tkausl Dec 23 '20 at 16:54
  • React will only render *elements* from expressions created with JSX syntax or with `React.createElement`. If you have just a plain string, even if the string contains HTML markup, it'll be displayed as a plain string. Either use `dangerouslySetInnerHTML` or (much better) return JSX instead of a string from the `.map` callback – CertainPerformance Dec 23 '20 at 16:54

0 Answers0