ReactJS change background image dynamically? ReactJS change background image dynamically? reactjs reactjs

ReactJS change background image dynamically?


You haven't specified when would you like to change backgroundImage, so I've created version which changes it with onClick:

React.createClass({    getInitialState: function () {        nextImg: false,    },    handleClick: function () {        this.setState({ nextImg: !this.state.nextImg })    },    render: function() {        var imgUrl = this.state.nextImg ? this.state.nextImgSrc : this.state.song.imgSrc;        var divStyle = {            backgroundImage: 'url(' + imgUrl + ')'        }        return (            <li>                <div ref="image-pane" style={divStyle} onClick={this.handleClick} className="player"></div>            </li>        )    }});

Notice that backgroundImage: 'url(' + imgUrl + ')' no longer must have trailing semicolon, in fact the trailing semicolon will cause React to raise and error.


This is caused by the trailing semicolon in your style. See react issues #2862.