React : Keys for lists

differentiates using index, random unique numbers and ordered unique numbers

by pushkal b

HTML

<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
<div id="mountNode">

</div>

CSS

.mountNode {
  color: #333;
}

body {
    font: 14px sans-serif;
}

.column {
    float: left;
    width: 31%;
    padding-right: 2%;
}

input {
    display: block;
    width: 100%;
}

Babel + JSX

class WithDefaultKeys extends React.Component{
    render() {
    	return(
      	<div>
        	{this.props.collection.map((item, i)=>
          <input key={i} id={i} defaultValue={item} />
          )}   
        </div>
      );  
    }
};

class WithUniqueRandomKeys extends React.Component {
    render() {
    	return(
      	<div>
        	{this.props.collection.map((item)=>{
          let random = Math.random()
          return(
          	<input key={random} id={random} defaultValue={item}/>
          )
          
          }
          
          )}   
        </div>
      );
    }
};

class WithUniqueConstantKeys extends React.Component{
    render() {
    	return(
      	<div>
        	{this.props.collection.map((item)=>
          <input key={item} id={item} defaultValue={item}/>
          )}   
        </div>
      );
    }
};

class Main extends React.Component{
    state = {
         collection: [],
         lastAddedItem: ''
    }
    componentDidMount() {
        this._add();
    }
    render() {
        return (
        <div>
          <button onClick={() => this._add()}>Add Item</button>
          <button onClick={() => this._changeLast()}>Change last item DOM value</button>
          <p>{this.state.lastAddedItem}</p>
          <div className='column'> Default
          	<WithDefaultKeys collection={this.state.collection}/>
          </div>
          <div className='column'>Random Unique
          	<WithUniqueRandomKeys collection={this.state.collection}/>
          </div>
          <div className='column'> Ordered Unique
          	<WithUniqueConstantKeys collection={this.state.collection}/>
          </div>
        </div>
        )
        
    };
    _add() {
        var item = Date.now();
        this.setState({
        	lastAddedItem: item,
          collection: [item].concat(this.state.collection)
        });
    };
    _changeLast() {
        [].forEach.call(document.querySelectorAll('.column'), function(column) {
           ...