React component starter

Create a new file component_name.jsx under app/javascript/modules/react_components

import React from 'react';

// provides the premium star and popover component based on user's premium status.
import SettingsComponentWrapper from './settings_component_wrapper';

/*
Component: ComponentName
Usage:

Required Props:
  
Optional Props:
  
Example:
  
Author:
 */

class ComponentName extends React.Component {

  // most of these are constant for POWr settings and will not change.
  static defaultProps = {};

  debouncedHandleChange = _.debounce((event) => {
    if (this.props.handleChangeComplete) {
      this.props.handleChangeComplete(event.target.value);
    }
  }, 500);

  handleChange = (event) => {
    event.persist();
    this.setState({value: event.target.value});
    this.debouncedHandleChange(event);
  };

  constructor(props) {
    super(props);
    this.state = _.extend({}, this.props, {

    })
  };

  render() {
    const {userPremiumStatus, featurePremiumStatus, component, namespace, helpText, label} = this.state;
    const wrapperProps = {userPremiumStatus, featurePremiumStatus, component, namespace, helpText, label};
    return (
      <SettingsComponentWrapper {...wrapperProps}>
        <p>your component goes here</p>
      </SettingsComponentWrapper>
    )
  }
}

export default ComponentName;