Exercise: Changing Label State
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>)
}
})