React keys

index.js

const React = require("react");
const { render } = require("react-dom");

const root = document.querySelector("#r");

const itemA = {
  key: "A",
  name: "Item A",
};
const itemB = {
  key: "B",
  name: "Item B",
};
const itemC = {
  key: "C",
  name: "Item C",
};
const itemD = {
  key: "D",
  name: "Item D",
};

const items = [
  [itemA, itemB, itemC],
  [itemC, itemB, itemD],
];

class App extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      index: 0,
      items: items[0],
    }
    this.switchItems = this.switchItems.bind(this);
  }
  
  switchItems() {
    const nextIndex = this.state.index ? 0 : 1;
    this.setState({
      index: nextIndex,
      items: items[nextIndex],
    })
  }
  
  render() {
    const items = this.state.items.map(item => {
      return <li key={item.key}>{item.name}</li>
    })
    
    return (
      <div style={{padding: "20px"}}>
        {items}
        <hr />
        <button onClick={this.switchItems}>Switch now</button>
      </div>
    )
  }
}


render(<App />, root)