title: passings array as props in reactjs
body: <p>I am new to react.</p>
  
  <p>I have been experimenting on react and I got stuck on how to pass array using props.</p>
  
  <p>case-1:</p>
  
  <pre><code>var c = ['program'];
  var Navigation = React.createClass({
      getInitialState: function () {
          return {
              openDropdown: -1
          };
      },
      getDefaultProps: function () {
          return {
              config: ['everyone']
          };
      },
      render: function () {
          return (
              &lt;div className="navigation"&gt;
                  helloworld {this.props.config[0]};
              &lt;/div&gt;
              );
      }
  });
  
  React.render(&lt;Navigation config={c}/&gt;, document.body);
  </code></pre>
  
  <p>This is rendering helloworld program. which is expected.</p>
  
  <p>Later I have tried.</p>
  
  <p><strong>case-2:</strong></p>
  
  <pre><code>var c = ['program'];
  var Navigation = React.createClass({
      getInitialState: function () {
          return {
              openDropdown: -1
          };
      },
      getDefaultProps: function () {
          return {
              config: ['everyone']
          };
      },
      render: function () {
          return (
              &lt;div className="navigation"&gt;
                {this.props.config} helloworld ;
              &lt;/div&gt;
              );
      }
  });
  
  React.render(&lt;Navigation config="React"/&gt;, document.body);
  </code></pre>
  
  <p>This is rendering React helloworld. which is expected as there are no propType defined.</p>
  
  <p>next I have tried.</p>
  
  <p><strong>case-3 :</strong></p>
  
  <pre><code>var c = ['program'];
  var Navigation = React.createClass({
      getInitialState: function () {
          return {
              openDropdown: -1
          };
      },
      getDefaultProps: function () {
          return {
              config: ['everyone']
          };
      },
      render: function () {
          return (
              &lt;div className="navigation"&gt;
                  helloworld {this.props.config[0]};
              &lt;/div&gt;
              );
      }
  });
  
  React.render(&lt;Navigation config=['!!!'] /&gt;, document.body);
  </code></pre>
  
  <p>Which is not rendering anything.</p>
  
  <p>Later when I have changed the <code>React.render(&lt;Navigation config=['!!!'] /&gt;, document.body);</code> to <code>React.render(&lt;Navigation config={['!!!']} /&gt;, document.body);</code></p>
  
  <p>it rendered helloworld !!!</p>
  
  <p>I have read in some tutorial that curly braces are used to pass variables so that JSX will know that they are external variable.</p>
  
  <p>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.</p>
  
  <p>When exactly are the curly braces used? </p>
  
  <p>And it would help me if some one can point me to any good book or online tutorials on react.</p>