passings array as props in reactjs

Question

I am new to react.

I have been experimenting on react and I got stuck on how to pass array using props.

case-1:

var c = ['program']; var Navigation = React.createClass({     getInitialState: function () {         return {             openDropdown: -1         };     },     getDefaultProps: function () {         return {             config: ['everyone']         };     },     render: function () {         return (             <div className="navigation">                 helloworld {this.props.config[0]};             </div>             );     } });  React.render(<Navigation config={c}/>, document.body); 

This is rendering helloworld program. which is expected.

Later I have tried.

case-2:

var c = ['program']; var Navigation = React.createClass({     getInitialState: function () {         return {             openDropdown: -1         };     },     getDefaultProps: function () {         return {             config: ['everyone']         };     },     render: function () {         return (             <div className="navigation">               {this.props.config} helloworld ;             </div>             );     } });  React.render(<Navigation config="React"/>, document.body); 

This is rendering React helloworld. which is expected as there are no propType defined.

next I have tried.

case-3 :

var c = ['program']; var Navigation = React.createClass({     getInitialState: function () {         return {             openDropdown: -1         };     },     getDefaultProps: function () {         return {             config: ['everyone']         };     },     render: function () {         return (             <div className="navigation">                 helloworld {this.props.config[0]};             </div>             );     } });  React.render(<Navigation config=['!!!'] />, document.body); 

Which is not rendering anything.

Later when I have changed the React.render(<Navigation config=['!!!'] />, document.body); to React.render(<Navigation config={['!!!']} />, document.body);

it rendered helloworld !!!

I have read in some tutorial that curly braces are used to pass variables so that JSX will know that they are external variable.

But why is case-3 not working with out explicit curly braces though the array is made during the call and why is it working for the case-2 where the string is made inline.

When exactly are the curly braces used?

And it would help me if some one can point me to any good book or online tutorials on react.

Answer 1

The curly braces only need to be used within JSX elements. Like this:

<MyComponent somProp={['something']} /> 

In the case above, the {} is the way of saying: "Evaluate the expression that I passed within and pass it as a prop". Within the {} you can pass any valid JavaScript object or expression. Note that if you pass a string, and specifically for strings, you don't need the curly braces... like <MyComponent somProp="something" />.

The above code is the equivalent of this:

var myArray = ['something']; <MyComponent somProp={myArray} />