title: React JSX does not identify object-fit in style attribute for image
body: <p>I was using bootstrap cards, where I need to set all images in the cards having same size.
  Though there are multiple ways of achieving the same but I was using this styling to achieve the same.</p>
  <p>Check the image style below</p>
  <pre><code>&lt;div className=&quot;card &quot; style={{width: &quot;18rem&quot;}}&gt;
      &lt;img src={imageUrl} className=&quot;card-img-top&quot; style={{width: &quot;100%&quot;, height: &quot;40vh&quot;, object-fit: contain}} alt=&quot;...&quot;/&gt;
      &lt;div className=&quot;card-body&quot;&gt;
          &lt;h5 className=&quot;card-title&quot;&gt;{title}...&lt;/h5&gt;
          &lt;p className=&quot;card-text&quot;&gt;{description}...&lt;/p&gt;
          &lt;a href={newsUrl} target=&quot;_blank&quot; className=&quot;btn btn-sm rounded-pill btn-primary&quot;&gt;Read More&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>However I am getting error</p>
  <blockquote>
  <p>SyntaxError:
  C:\Users\hpoddar\Desktop\WebDev\ReactComplete\newsapp\src\components\NewsItem.js:
  Unexpected token, expected &quot;,&quot; (10:110)</p>
  </blockquote>
  <p><a href="https://i.stack.imgur.com/0eoj8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0eoj8.png" alt="enter image description here" /></a></p>
  <p>If I remove the object-fit attribute everything works fine and expected. And the wiggly line goes away.</p>
  <p>How can I resolve the same?</p>
  <pre><code>Bootstrap version : 5.1
  react: 17.0.2
  react-dom: 17.0.2
  react-scripts: 4.0.3
  web-vitals: 1.1.2
  </code></pre>
  <p><strong>EDIT :</strong> I had this doubt why object-fit was used as objectFit, which was answered in the comments by Andrew.</p>
  <blockquote>
  <p>Since the inline CSS is written in a JavaScript object, properties
  with two names, like background-color, must be written with camel case
  syntax:</p>
  </blockquote>