Exercise: Changing Label State

In notebook:
Building Modern Web Apps
Created at:
2016-01-29
Updated:
2016-01-29
Tags:
libraries JavaScript React Ampersand
Click on the pencil icon (add a handler)(NPM 3 flattens the module dependency tree)When interacting with the app/site you should never react by rendering. You should change the state and it should call the re-rendering.

Add a handler to the edit icon
  // ****     components/label-item.js        ****
import React form 'react'
// ++++ 3. import the mixin
import ampersandMixin form 'ampersand-react-mixin'

export default React.createClass({
    // ++++ 4. add the mixin
    mixins: [ampersandMixin]
    // ++++ 2. define the handler
    onEditClick () {
        this.props.label.editing = true
    },
    
    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>
                    // ++++ 1. add the handler
                    <span onClick={this.onEditClick}>edit label</span>
                </div>    
            )
        }
        return (<div>{content}</div>)
    }
})