exercise-3.md

##Exercise 3: Add properties to customize Toggle values

1. Add two properties to propTypes: enabledText and disabledText.

// app/components/Toggle.js
static propTypes = {
  enabled: PropTypes.bool,
  enabledText: PropTypes.string,
  disabledText: PropTypes.string
};

1. Set the defaultProps to 'ON' and 'OFF'.

// app/components/Toggle.js
static defaultProps = {
  enabled: false,
  enabledText: 'ON',
  disabledText: 'OFF'
};

1. Use the component's props to set the toggle values.

// app/components/Toggle.js
render() {
  return (
    <div>{this.props.enabled ? this.props.enabledText : this.props.disabledText}</div>
  )
}

1. Customize the Toggle by filling in your values for enabledText and disabledText.

// app/main.js
render(<Toggle enabled={true} enabledText='Yep' disabledText='Nope' />, document.getElementById('app'))

###[Next Step: Use children as the `Toggle` label →](./exercise-4.md)