Backticks in a function that gets called in render

Question

What am I doing wrong here ? I'm returning return children; in a function which gets called in render()

children.push(<img key="`${this.data_images.hits[i].id}`" src="`${this.data_images.hits[i].previewURL}`"/>)

Warning: Encountered two children with the same key, ${this.data_images.hits[i].id}

And the rendered output is

<img src="`${this.data_images.hits[i].previewURL}`">

Answer 1

"`${this.data_images.hits[i].id}`"

this is simple string if you want to get your template work - you need to remove qoutation and past {} instead.

So code would be

children.push(<img key={`${this.data_images.hits[i].id}`} src={`${this.data_images.hits[i].previewURL}`}/>)

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals