example2.js

var TestList = React.createClass({
  render: function() {
    var i = 0;
    var items = this.props.items.map(function(item) {
      return (
        <div key={i++}>{item.name}</div>
      );
    });
 
    return (
      <div>
        <div>{items}</div>
        <button onClick={this.props.addItem}>Legg til</button>
      </div>
    );
  }
});

var TopItem = React.createClass({
  render: function () {
    return (
      <h3>{this.props.item}</h3>
    );
  }
});
 
var TestForm = React.createClass({
  getInitialState: function() {
    return { items: [] };
  },
  
  addItem: function () {
    // Don't mutate the item in state/props
    this.setState({
      items: ['Tore Lervik'].concat(this.state.items)
    });
  },
  
  render: function() {
    return (
      <div>
        <TestList items={this.state.items} addItem={this.addItem} />
        <button onClick={this.showLog}>Vis logg</button>
        <TopItem item={this.state.items[0]} />
      </div>
    );
  },
  showLog: function() {
    console.log(this.state.items);
  }
});
 
React.render(<TestForm/>, document.getElementById('example'));