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}`">

score 0 · Accepted Answer · answered Apr 05 '20 at 12:16

0

"`${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}`}/>)

answered Apr 05 '20 at 12:16

layonez

Is this specific to React ? – anjanesh Apr 05 '20 at 12:31
template literals is vanilla js feature, but it is required to chose - if you need plain string then you use `'` or `"` but if you want to make a template then use - ` – layonez Apr 05 '20 at 14:18

1 Answers1