title: Object literal values and React.js
body: <p>Lets say there are 2 components Main and Card, Card is child of Main in React.js.
  Card will pass in an string value to Main. Thus state in Main for the Card would update.</p>
  
  <pre><code>var Card= React.createClass({
  ...
  this.props.updateName(loginVal.value); //pass in a 'string' to updateName()
  ...
  });
  
  var Main = React.createClass({
      getInitialState: function() {
          return {
              names: []
          };
      },
      updateName: function (loginVal) {
          this.setState({ 
              names: this.state.names.concat(loginVal) // I don't understand why using 'concat' works but not 'push'.
          });
      },
      render: function(){
          var cardArr = this.state.names.map(function(item){
              return ( &lt;Card login={item} /&gt; );
          });
          return (
              &lt;div&gt;
                  &lt;Form updateName={this.updateName} /&gt;
                  {cardArr}
              &lt;/div&gt;
          );
      }
  });
  </code></pre>
  
  <p>My question is why <code>this.state.names.concat(loginVal)</code> works when <code>this.state.names</code> is an <code>empty array</code> and <code>loginVal</code> is a <code>string</code>. <code>[].concat('string')</code> just don't make sense to me.</p>