Inline style is not working ReactJS

user_4106374 0
Viewed 31236

I am trying to learn React. Why can you not use style inside of a return inside of a component?

The Error:

The style prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX. This DOM node was rendered by Home.

<div className="single_slide" style="background-image: url(../images/WinterCalling_2016.jpg);">

I have also tried this also:

<div className="single_slide" style={{background-image: 'url(../images/WinterCalling_2016.jpg)'}}>

or 

<div className="single_slide" style={{background-image: url(../images/WinterCalling_2016.jpg)}}>

Any help with this syntax would be greatly appreciated. Other people posted they change style to say styles but that did not seem to work either.

reactjs
5 Answers
Related