React error: Style prop value must be an object react/style-prop-object

Question

I am trying to wrap text around an image and if I use the following code:

<div className="container">          <img src={myImageSource} alt="swimmer" height="300" width="300" style="float: left" />          <p> This is where the other text goes about the swimmer</p>  </div> 

Now I understand that this style="float: left" is html 5. However if I use the following code:

<div className="container">          <img src={myImageSource} alt="swimmer" height="300" width="300" align="left" />             <p> This is where the other text goes about the swimmer</p>  </div> 

It works! Why can't I use style in React?

Answer 1

You can still use style in react. Try : style={{float: 'left'}}

Answer 2

The issue is you are passing style as a String instead of an Object. React expects you to pass style in an object notation:

style={{ float:`left` }}  // Object literal notation 

or another way would be:

const divStyle = {   margin: '40px',   border: '5px solid pink' };  <div style={divStyle}>   // Passing style as an object 

See the documentation for more info