Does ReactJS parse object literals into strings?

Question

I am walking through the ReactJS tutorial right now, mulling over the section 'Thinking In React', and in particular an aspect of the code really bothers me:

class ProductRow extends React.Component {
  render() {
    var name = this.props.product.stocked ?
      this.props.product.name :
      <span style={{color: 'red', background: 'green'}}>     // this line
        {this.props.product.name}
      </span>;
    return (
      <tr>
        <td>{name}</td>
        <td>{this.props.product.price}</td>
      </tr>
    );
  }
}

For the rest of the code, see: http://codepen.io/lacker/pen/vXpAgj

... at line 11, style is assigned {color: 'red'}. In my head, this shouldn't work, because it doesn't conform to the styling syntax (e.g. "color: 'red'"). Yet, if I replace curly braces with double quotes, the code doesn't run.

1) Is there an ES6/JSX/React rule that converts object literals to the double quote format? (How does this work?)

2) Why wouldn't replacing the curly brackets with double quotes work? (Tried it on codepen)

Thank you!

Niyoko · Accepted Answer · 2016-11-03 01:51:27Z

1

As mentioned in the documentation, the style attribute accepts a JavaScript object with camelCased properties rather than a CSS string. So if you replace it with quoted string, it wouldn't work.

They choose this approach because this is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes.

Note that style name are camelCased rather than dash-separated. i.e. marginLeft rather than margin-left.

answered Nov 3, 2016 at 1:51

Niyoko

7,7224 gold badges36 silver badges60 bronze badges

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

1 Comment

Victor Lin Over a year ago

This was what I was looking for. Thanks!

Felix Kling · Accepted Answer · 2016-11-03 03:19:06Z

Is there an ES6/JSX/React rule that converts object literals to the double quote format? (How does this work?)

The style prop either accepts a string or an object value. So in a sense, yes, the object is converted to the proper CSS text string. This is very similar to the style property of DOM elements.

However, this is specific behavior to the style prop of components representing HTML elements. If that was done to every component it wouldn't be possible to pass objects as prop values to custom components.

Why wouldn't replacing the curly brackets with double quotes work?

Because the string "{color: 'red'}" isn't valid CSS. The fact that you tried to replace the curly braces makes me wonder whether you understand the difference.

A JSX attribute can either have the form foo="bar" or foo={bar}. In the first case, the value passed to foo will be a string, containing the value bar. In the second case, whatever is inside the braces ({}) is evaluated as a JavaScript expression and its result is passed to foo.

This might be more obvious if we look at what these JSX snippets are converted to:

// In:
<div style="color:red" />
// Out:
React.createElement("div", { style: "color:red" });

// In:
<div style={{color: 'red'}} />
// Out:
React.createElement('div', { style: { color: 'red' } });

// Therefore
// In:
 <div style="{color: 'red'}" />
// Out:
React.createElement("div", { style: "{color: 'red'}" });

Collectives™ on Stack Overflow

Does ReactJS parse object literals into strings?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related