slugifyComponentCaptureValue

slugifyExample.jsx

import React from 'react';
import slugify from 'slugify';

export default React.createClass({
  getInitialState() {
    return {
      slugifiedString: null,
      textValue: null,
      isDisabled: true
    }
  },

  setTextValue(event) {
    this.setState(
      { 
        textValue: event.target.value,
        isDisabled: false
      }
    );
  },

  render() {
    let { slugifiedString, 
          textValue,
          isDisabled } = this.state;

    return (
      <form className="forms forms-inline">
        <input type="text" 
               className="width-50" 
               placeholder="What do you want to slugify?"
               onChange={this.setTextValue} />
        <button className="btn" disabled={isDisabled}>Slugify This String</button>
      </form>
    );
  }
});