React inline styles error

Question

Big fan of inline styles and decided to give it a try. I'm slowly getting the hang of it but I'm now stuck because I keep getting the "Unknown prop styles on <img> tag" error.

My code is as shown below:

render(){
    let imgUrl = 'http://mrmrs.io/images/0006.jpg';
    let divStyles = {
        backgroundImage:'url(" + imgUrl + ")',
        backgroundSize: 'cover'
    };
    return(
        <main class="cf w-100">
          <div class="fl w-50 w-third-m w-25-ns">
            <div class="aspect-ratio aspect-ratio--1x1">
              <img styles="{{divStyles}}"  class="db bg-center cover aspect-ratio--object" />
            </div>
          </div>
        </main>

    )
}

The simple stuff are always the ones that give me the most problems. Any help would be appreciated.

Shouldn't you use className instead of class when writing JSX? — Steve
– Steve, Commented Oct 25, 2016 at 5:41
change class to className and also when the divStyles is an object just use it as style={divStyles} — Farzad Yousefzadeh
– Farzad Yousefzadeh, Commented Oct 25, 2016 at 5:44
Thanks guys. I tried the above but now get "The style prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX." — user3590911
– user3590911, Commented Oct 25, 2016 at 6:34
Do I see correctly that you are defining an <img> without a src but with only a background-image? If so, you're doing it wrong. — Mr Lister
– Mr Lister, Commented Nov 6, 2016 at 8:58

Pranesh Ravi · Accepted Answer · 2016-10-25 06:48:53Z

3

The prop should be style not styles. And you need to define a height and a width to the img tag.

Hope this helps!

class App extends React.Component{
  render(){
      let imgUrl = 'http://mrmrs.io/images/0006.jpg';
      let divStyles = {
          backgroundImage:'url(' + imgUrl + ')',
          backgroundSize: 'cover',
          height: 200,
          width: 200,
      };
      return(
          <main className="cf w-100">
            <div className="fl w-50 w-third-m w-25-ns">
              <div className="aspect-ratio aspect-ratio--1x1">
                <img style={divStyles}  className="db bg-center cover aspect-ratio--object" />
              </div>
            </div>
          </main>

      )
  }
}
ReactDOM.render(<App/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

answered Oct 25, 2016 at 6:48

Pranesh Ravi

19.2k10 gold badges51 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user3590911 Over a year ago

Thanks. I had to change backgroundImage:'url(" + imgUrl + ")', to backgroundImage:'url(' + imgUrl + ')', and change styles to style and it worked.

Pranesh Ravi Over a year ago

@user3590911 That's goood!

Shubham Khatri · Accepted Answer · 2016-10-25 06:51:22Z

Firstly you need to use the style object differently like style={divStyles} and not styles="{{divStyles}}" second you image will now be rendered since 'url("+ imgUrl + ")', will be treated as a string and not rendered as 'url("http://mrmrs.io/images/0006.jpg")',

class App extends React.Component {
  render(){
    let imgUrl = 'http://mrmrs.io/images/0006.jpg';
    var url = 'url("' + imgUrl + '")'; 
    let divStyles = {
        backgroundImage:url,
        backgroundSize: 'cover'
    };
    return(
        <main class="cf w-100">
          <div class="fl w-50 w-third-m w-25-ns">
            <div class="aspect-ratio aspect-ratio--1x1">
              <img style={divStyles}  class="db bg-center cover aspect-ratio--object" />
            </div>
          </div>
        </main>

    )
}
}

ReactDOM.render(<App/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script>
<div id="app"></div>

Jagan · Accepted Answer · 2016-10-25 06:52:39Z

0

You are confused with {{}} and {} in React.

With your code, it is not required to have double braces {{}} because the divStyles is already an object.

Try the below one, should work.

<img styles="{divStyles}"  class="db bg-center cover aspect-ratio--object" />

The above could be written as shown below

<img styles="{{
      backgroundImage:'url(' + imgUrl + ')',
      backgroundSize: 'cover',
      height: 200,
      width: 200,
  }}"  class="db bg-center cover aspect-ratio--object" />

answered Oct 25, 2016 at 6:52

Jagan

5,2567 gold badges41 silver badges61 bronze badges

Collectives™ on Stack Overflow

React inline styles error

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related