homerboy homerboy - 2 months ago 31
CSS Question

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.

Answer

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.

Comments