Cancelling the Edit State

In notebook:
Building Modern Web Apps
Created at:
libraries JavaScript React Ampersand
  // ****     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'>
        } else {
            content = (
                <div className='label'>
                    <span className='label-color' style={{backgroundColor: cssColor}}> </span>
                    <span onClick={this.onEditClick}>edit label</span>
                    // ++++ 2. add the handler
                    <span onClick={this.onCancelClick}>cancel editing</span>
        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
Add debugger​ breakpoint. Talks a bit more about the chrome console and debugger.
Just be careful (have a tool the checks for it) to not to commit them.
Hot loading is really great: don't have to recreate your state.