React inline css placing brackets directly in html output

Question

I'm attempting to use an inline style in react, which I created with create-react app.

From what I've seen, the following should work properly:

<div id="root" style={{ height: 'auto' }}></div>

However, the following is output in the HTML when I run yarn start :

When I choose "edit html" in chrome, it looks like this:

<div id="root" style="{{" height:="" 'auto'="" }}="">

Why is my {{ }} not working? Have I missed something? Or does create-react-app need something extra configured in webpack or babel?

Perhaps relevant, I have run eject but haven't changed any of the default settings that could affect this as far as I know.

Answer 1

You are confusing between style attribute in JSX and style attribute in HTML .

// HTML @ index.html
<div style="background: blue; height: 50px; width: 50px;"/>

// JSX @ Component.js
<div style={{ background: 'blue', height: 50, width: 50 }} />

// Transpiled to
React.createElement("div", {
  style: {
    background: 'blue',
    height: 50,
    width: 50
  }
});