passings array as props in reactjs -

i new react.

i have been experimenting on react , got stuck on how 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 rendering helloworld program. expected.

later 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 rendering react helloworld. expected there no proptype defined.

next 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 not rendering anything.

later when have changed react.render(<navigation config=['!!!'] />, document.body); react.render(<navigation config={['!!!']} />, document.body);

it rendered helloworld !!!

i have read in tutorial curly braces used pass variables jsx know external variable.

but why case-3 not working out explicit curly braces though array made during call , why working case-2 string made inline.

when curly braces used?

and me if 1 can point me book or online tutorials on react.

the curly braces only need used within jsx elements. this:

<mycomponent somprop={['something']} /> 

in case above, {} way of saying: "evaluate expression passed within , pass prop". within {} can pass any valid javascript object or expression. note if pass string, , strings, don't need curly braces... <mycomponent somprop="something" />.

the above code equivalent of this:

var myarray = ['something']; <mycomponent somprop={myarray} />