gistfile1.js

/*
 * Your challenge: Find the bug in this code.
 *
 * The symptom: When I click "Remove" on "Bob", "Fred" disappears. Why?
 *
 * Hint: It's not a syntax error, and there are no console warnings.
 */

class MyComponent extends React.Component {
  constructor() {
    this.state = {
      things: [{
        name: "Bob"
      },{
        name: "Jane"
      },{
        name: "Fred"
      }]
    }
  }

  remove(index) {
    this.state.things.splice(index, 1);
    this.setState({
      things: this.state.things
    })
  }

  render() {
    return (
      <ul>
      {this.state.things.map((thing, index) => (
        <li key={index}>
          <input type="text" defaultValue={thing.name} />
          <button onClick={this.remove.bind(this, index)}>Remove</button>
        </li>
      ))}
      </ul>
    )
  }
}

See this: http://stackoverflow.com/a/28993564/1121547

Solution: change key={index} to key={thing.name} (Or some unique value)

https://jsfiddle.net/sj0zcwzp/1/