We don't have any data yet. Let's put it in.

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

export default React.createClass({
    render () {
        const {label} = this.props
        let content
        
        if (label.editing) { 
            content = (
                <form className='label'>
                    ...
                </form>
            )
        } else {
            content = (
                <div className='label'>
                    ...
                    // ++++ 1. somewhere to display the label name
                    <span>{label.name}</span>
                </div>    
            )
        }
        return (<div>{content}</div>)
    }
})

We want to dynamically add colours to labels. We can specify a style attribute

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

export default React.createClass({
    render () {
        const {label} = this.props
        // ++++ 2. add the hash in front of the color specification
        const cssColor = '#' + label.color
        let content
        
        if (label.editing) { 
            content = (
                <form className='label'>
                    ...
                </form>
            )
        } else {
            content = (
                <div className='label'>
                    ...
                    // ++++ 1. add label color
                    // need to use {{}} syntax to specify an object
                    // the other {} just tell that it's a dynamic object
                    <span className='label-color' style={{backgroundColor: cssColor}}> </span>
                    <span>{label.name}</span>
                </div>    
            )
        }
        return (<div>{content}</div>)
    }
})