CODEWITHSUNDEEP
javascriptcssreactjsecmascript-6babeljs
Victor Lin
Victor Lin

Reputation: 298

Does ReactJS parse object literals into strings?

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!

Upvotes: 2

Views: 155

Answers (2)

Felix Kling
Felix Kling

Reputation: 816292

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'}" });

Upvotes: 0

Niyoko
Niyoko

Reputation: 7662

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.

Upvotes: 1

Related Questions