Keys

In notebook:
Building Modern Web Apps
Created at:
2016-01-27
Updated:
2016-01-27
Tags:
JavaScript libraries React Performance Ampersand
Warning in dev console from React: each array item should have a unique key
Basically React needs to know if you have moved an item or deleted it so that it can be efficient (keep track of the element).
Let's add a key
  // ****     pages/repos.js      ****
import React form 'react'
import ampersandMixin from 'ampersan-react-mixin'

export default React.createClass({
    mixins: ampersandMixin,
    
    render () {
        const {repos} = this.props
    
        return (
            <div>
                <h2>Repos</h2>
                <ul>
                    {repos.map( repo => 
                        // ++++ 1. add a key
                        // use the id that we get from github
                        (<li key={repo.id}><a href="">{repo.full_name}</a></li>)
                    )}
                </ul>
            </div>
        )
    }
    
})