CODEWITHSUNDEEP
javascripthtmlcssreactjs
patrickhuang94
patrickhuang94

Reputation: 2115

Background image not set for React button

I have 6 buttons that are being mapped, and I would like to give a background to each of the buttons.

button(x) {
    console.log(x.image) # Gives correct URL for image for button
    var modalButton = {
        backgroundImage: x.image
    }

    return (
        <Button style={modalButton}>Clickity Click</Button>
    )
}

render() {
    <div>
        {_(this.state.data).map((x) => this.button(x))}
    </div>
}

However, this isn't working. From what I'm aware, backgroundImage without the dash is the correct syntax here for inline CSS.

Upvotes: 0

Views: 4901

Answers (1)

Kafo
Kafo

Reputation: 3656

You need to do

var modalButton = {
    backgroundImage: 'url(' + x.image + ')'
}

unless you have that included in the x.image variable. Providing more code will clarify this.

Upvotes: 1

Related Questions