React backgroundImage from Spotify Response

Question

Hello I'm beginner with ReactJs :(

So I want have background image from a response (from Spotify)

i have all data I want but not the BG

my code look like :

getNowPlaying(){
SpotifyWebApi.getMyCurrentPlaybackState()
.then((Response) => {
  if (Response !== "") {this.setState({
    nowPlaying:{
      name: Response.item.name,
      image: Response.item.album.images[0].url,
      artiste: Response.item.artists[0].name,
      backgroundImage: 'url(Response.item.album.images[0].url)'
    }
    })


  }else{
    alert("Play music !");
    console.log("Play music !")}

})

and

<div className="box1"> 
<img src={ this.state.nowPlaying.image} /> 
</div>

<div className="box2">
<h1>{ this.state.nowPlaying.name} </h1>
<p>{ this.state.nowPlaying.artiste} </p> 
</div>
<div className="background" style={this.state.nowPlaying.backgroundImage}></div>

Thank :)

Answer 1

To set background image in reactJs from api response you should set background image with inline style like this:

<div 
  className="background" 
  style={{backgroundImage: `url(${this.state.nowPlaying.backgroundImage})`}}
>
...
</div>