Adding React Components with Button Clicks

DynamicReactComponents.js

var React = require('react');

var OpenResponse = React.createClass({
  render: function() {
    return (
      <div>
        Open Response
      </div>
    )
  }
});

var New = React.createClass({

  getInitialState: function() {
    return {
      myArr: [{id:1, name: "Some name"}]
    }
  },

  addChild: function() {
    this.setState({
      myArr: this.state.myArr.concat([{id:2, name:"other name"}])
    })
  },

  render: function() {
    return(
      <div>
        <button onClick={this.addChild}>Add Component</button>
        {
          this.state.myArr.map(function(item) {
            return <OpenResponse key={item[0].id} />
          })
        }
      </div>
    )
  }
});

Now, just my personal preference, but I find it a lot easier and cleaner to keep my code out of my JSX. If I was writing this, I'd have:

const state = this.state;
const items = state.myArr.map(function(item) {
  return (
    <OpenResponse key={item.id} />
  );
});

return (
  <div>
    <button>...</button>
    {items}
  </div>
);

I find that writing my views this way makes them much more readable in the future.

Using destructuring and arrow functions would make it even better than that, in my opinion.

const { myArr } = this.state;
const items = myArr
  .map(i => <OpenResponse key={i.id} />);