// ****     components/label-item.js        ****
import React form 'react'
import ampersandMixin form 'ampersand-react-mixin'

export default React.createClass({
    mixins: [ampersandMixin]
    onEditClick () {
        this.props.label.editing = true
    },
    
    // ++++ 1. define the cancelclick handler
    onCancelClick () {
        this.props.label.editing = false
    },
    
    render () {
        const {label} = this.props
        const cssColor = '#' + label.color
        let content
        
        if (label.editing) { 
            content = (
                <form className='label'>
                    ...
                </form>
            )
        } else {
            content = (
                <div className='label'>
                    ...
                    <span className='label-color' style={{backgroundColor: cssColor}}> </span>
                    <span>{label.name}</span>
                    <span onClick={this.onEditClick}>edit label</span>
                    // ++++ 2. add the handler
                    <span onClick={this.onCancelClick}>cancel editing</span>
            </div>    
            )
        }
        return (<div>{content}</div>)
    }
})

What about the navigation event (when you click it will bubble up). The locallinks  module will handle this (and tell that it's not a real navigation) but we can still manually stop be event propagation. (​event.preventDefault()​)Talks about css clasnames, that use hyphens 

How to use breakpoints

Hot loading is really great: don't have to recreate your state.