2

When I use the JSX below to set inline styles programmatically, the page won't load. I've simplified the code to a trivial example to illustrate the problem. 

const AboutPage = () => {
    let buttonStyle = { color: 'red' };
    return (
        <div>
            <input type="button" style="{buttonStyle}" value="Click Me" />
        </div>
    );
}

I get this error in the browser console:

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

This is my first day learning React and JSX so I must be missing something obvious. But it seems like I'm doing the right thing: I'm putting an object (not a string) inside curly braces. Why does React interpret it as a string?

Justin Grant
  • 44,807
  • 15
  • 124
  • 208

1 Answers1

2

The problem was the quotes around the attribute value. In JSX, if you replace a static attribute value with JavaScript code, the code must be inside curly brackets and the bracketed code can't be quoted. This is different from how other templating languages (e.g. ASP.NET) where quotes around attributes-with-code are allowed or even required.

When I removed the quotes around the attribute value, then it worked fine.

<!-- bad -->
<input type="button" style="{buttonStyle}" value="Click Me" />

<!-- good -->
<input type="button" style={buttonStyle} value="Click Me" />

It seems obvious now that I figured it out, but I wasted a half-hour digging through exception callstacks and googling "how to set inline styles with react" sample code before I noticed the quotes.

I'm posting this Q&A here in the hopes that a future JSX newbie will be able to Google for this error message and figure out what they're doing wrong. ;-)

Justin Grant
  • 44,807
  • 15
  • 124
  • 208
  • this is actually explicitly explained here: https://facebook.github.io/react/docs/dom-elements.html#style, in the official documentation. "Google reflex" is too strong to resist sometimes :) – 62mkv Jan 16 '17 at 07:43
  • Glad you figured this out. You can also declare the style in-line, like so: `style={{color: "red"}}`. Note the double curly-braces. Also note that css properties that are normally written with a dash (e.g font-size, text-align, etc) are written in camel-case instead (e.g fontSize, textAlign, etc). – Chris Jan 16 '17 at 09:02
  • 1
    @62mkv - yep, that's the documentation for inline styles (and I read it before posting this), but those docs didn't help me because my error was more fundamental: I didn't realize that the JSX parser disallows quotes around attribute values that are supposed to be interpreted as JavaScript. I just created a Pull Request for the relevant section of the JSX docs ( https://facebook.github.io/react/docs/introducing-jsx.html#specifying-attributes-with-jsx) to be clearer about the need to strip quotes. – Justin Grant Jan 16 '17 at 23:37
  • Following up: my pull request was accepted and the docs are now updated to clarify that quotes and curly braces are mutually exclusive. See the new paragraph at the end of the attributes section: https://facebook.github.io/react/docs/introducing-jsx.html#specifying-attributes-with-jsx – Justin Grant Jan 23 '17 at 18:43