React: Return Statement

Question

So I was reading on the Internet that

The vanilla JavaScript rule is, a return statement can only return one thing. That one thing can be an array, an object, or React's >JSX case, a that contains multiple DOM elements.

Which Makes sense but then on the same place it was mentioned that

return [ ... cannot include a CSS class, style, an HTML attribute , ... but,

    return <div classname="myClass" style={‌{color:"red"}} onClick={ ... }><p>A</p><p>B ... 

can include a CSS class, style, an HTML attribute.

This statement is being little to confusing for me to understand.

" return [ ... cannot include a CSS class, style, an HTML attribute, ..."

[Question]: Can someone explain the above statement with example?

Also, this is a valid statement which we use in tutorial

return [

 <p  onClick={this.props.click}> Hey, I am {this.props.name}{this.props.children} and my age is {this.props.age} </p>,
<input type="text" onChange={this.props.changed} value={this.props.name} />
  ]

I guess we haven't used any html attribute above? but if we pass CSS class , or an HTML attribute such src or href , it won't work?

Answer 1

In JSX, return <someHtmlElement attribute='...'> is just a fancy syntax for a React.createElement('someHtmlElement... call, so essentially, you are still returning an object. Or, in case of your example return [ <p onClick... : an array of objects.

Also bear in mind that CSS class, style and HTML attributes only make sense in the context of an HTML element (simply put, between a < and a > ), as those will all become part of the React.createElement call mentioned above. So this is why you can't directly return them in an array (ie return [ classname="myClass", style={‌{color:"red"}} ] ): they don't have a meaning in "plain" JavaScript.

You can, however, return an array of HTML elements (which are essentially objects to JavaScript in this case), and those HTML elements of course can have CSS class, style and HTML attributes .

I hope this clears it up. When in doubt, just bear in mind that JSX simply ends up being JavaScript in the end, and try to think about what "vanilla" JavaScript would allow you to do.

Answer 2

what you see is 'jsx', a new syntax which came about when react was introduced. jsx looks like html, but gets converted to normal javascript function calls. You cannot use a file containing jsx and feed it to the browser. You will need some converter who converts the jsx code inside your file to javascript function calls. babel is the most famous converter of them all.

For eg

<div className='main' style={{backgroundColor: 'red'}}>abc</div>

gets converted to

React.createElement(
  'div',
  { className: 'main', style: { backgroundColor: 'red' } },
  'abc'
);

So, in your original question, what you are returning is not css properties or html, but whatever is returned by the function call React.createElement(). What does React.createElement return? It returns a plain javascript object. That object describes the html which has to be rendered. From your questions point of view, you are actually return an object.

And in your last example, therefore, you are returning an array of objects.

return [

 <p  onClick={this.props.click}> Hey, I am {this.props.name}{this.props.children} and my age is {this.props.age} </p>,
<input type="text" onChange={this.props.changed} value={this.props.name} />
  ]

PS You can check what javascript code your jsx will convert to here - https://babeljs.io/repl/

Answer 3

There is a strong difference between plain javascript syntax and React syntax. React use a syntax called JSX which thanks to compilers as Babel it is tanspiled JSX code in javascript.

To give you a better idea on what Babel does with JSX:

 return [ <p />, <p className="hello" /> ];

it becomes:

 return [React.createElement("p", null), React.createElement("p", { className: "hello" })];

You could visit https://babeljs.io/repl/ and see how transpiling works.