{"componentChunkName":"component---src-templates-codepen-example-js","path":"/redirect-to-codepen/reconciliation/no-index-used-as-key","result":{"pageContext":{"action":"https://codepen.io/pen/define","payload":"{\"editors\":\"0010\",\"html\":\"<div id=\\\"root\\\"></div>\",\"js\":\"const ToDo = props => (\\n  <tr>\\n    <td>\\n      <label>{props.id}</label>\\n    </td>\\n    <td>\\n      <input />\\n    </td>\\n    <td>\\n      <label>{props.createdAt.toTimeString()}</label>\\n    </td>\\n  </tr>\\n);\\n\\nclass ToDoList extends React.Component {\\n  constructor() {\\n    super();\\n    const date = new Date();\\n    const toDoCounter = 1;\\n    this.state = {\\n      list: [\\n        {\\n          id: toDoCounter,\\n          createdAt: date,\\n        },\\n      ],\\n      toDoCounter: toDoCounter,\\n    };\\n  }\\n\\n  sortByEarliest() {\\n    const sortedList = this.state.list.sort((a, b) => {\\n      return a.createdAt - b.createdAt;\\n    });\\n    this.setState({\\n      list: [...sortedList],\\n    });\\n  }\\n\\n  sortByLatest() {\\n    const sortedList = this.state.list.sort((a, b) => {\\n      return b.createdAt - a.createdAt;\\n    });\\n    this.setState({\\n      list: [...sortedList],\\n    });\\n  }\\n\\n  addToEnd() {\\n    const date = new Date();\\n    const nextId = this.state.toDoCounter + 1;\\n    const newList = [\\n      ...this.state.list,\\n      {id: nextId, createdAt: date},\\n    ];\\n    this.setState({\\n      list: newList,\\n      toDoCounter: nextId,\\n    });\\n  }\\n\\n  addToStart() {\\n    const date = new Date();\\n    const nextId = this.state.toDoCounter + 1;\\n    const newList = [\\n      {id: nextId, createdAt: date},\\n      ...this.state.list,\\n    ];\\n    this.setState({\\n      list: newList,\\n      toDoCounter: nextId,\\n    });\\n  }\\n\\n  render() {\\n    return (\\n      <div>\\n        <code>key=id</code>\\n        <br />\\n        <button onClick={this.addToStart.bind(this)}>\\n          Add New to Start\\n        </button>\\n        <button onClick={this.addToEnd.bind(this)}>\\n          Add New to End\\n        </button>\\n        <button onClick={this.sortByEarliest.bind(this)}>\\n          Sort by Earliest\\n        </button>\\n        <button onClick={this.sortByLatest.bind(this)}>\\n          Sort by Latest\\n        </button>\\n        <table>\\n          <tr>\\n            <th>ID</th>\\n            <th />\\n            <th>created at</th>\\n          </tr>\\n          {this.state.list.map((todo, index) => (\\n            <ToDo key={todo.id} {...todo} />\\n          ))}\\n        </table>\\n      </div>\\n    );\\n  }\\n}\\n\\nReactDOM.render(\\n  <ToDoList />,\\n  document.getElementById('root')\\n);\\n\",\"js_external\":\"//unpkg.com/react/umd/react.development.js;//unpkg.com/react-dom/umd/react-dom.development.js\",\"js_pre_processor\":\"babel\",\"layout\":\"left\"}"}},"staticQueryHashes":[]}