import React, { Component } from 'react';
import PropTypes from 'prop-types';
import CreatableSelect from 'react-select/lib/Creatable';
import { archetypes } from '../constants/characterOptions';

export default class Archetype extends Component {
  static propTypes = {
    archetype: PropTypes.string.isRequired,
    updateArchetype: PropTypes.func.isRequired
  };

  handleArchetypeChange = val => {
    const value = val ? val.value : '';
    this.props.updateArchetype(value);
  };

  render() {
    const { archetype } = this.props;

    const value = archetype
      ? {
          value: archetype,
          label: archetype
        }
      : null;

    const archetypeOptions = archetypes.map(a => ({
      value: a,
      label: a
    }));

    return (
      <div className="row">
        <div className="col-sm-3">Archetype:</div>
        <div className="col-sm-9">
          <CreatableSelect
            isClearable
            value={value}
            options={archetypeOptions}
            onChange={this.handleArchetypeChange}
          />
        </div>
      </div>
    );
  }
}

@@ -9,23 +9,8 @@
 eact
-, %7B Component %7D
  fro
@@ -190,21 +190,24 @@
 default 
-class
+function
  Archety
@@ -212,150 +212,50 @@
 type
- extends Component %7B%0A  static propTypes = %7B%0A    archetype: PropTypes.string.isRequired,%0A    updateArchetype: PropTypes.func.isRequired%0A  %7D;%0A%0A 
+(%7B archetype, updateArchetype %7D) %7B%0A  const
  han
@@ -332,19 +332,8 @@
     
-this.props.
 upda
@@ -362,62 +362,8 @@
 %7D;%0A%0A
-  render() %7B%0A    const %7B archetype %7D = this.props;%0A%0A  
   co
@@ -392,16 +392,12 @@
     
- 
- 
 ? %7B%0A
-  
     
@@ -418,18 +418,16 @@
 hetype,%0A
-  
         
@@ -453,14 +453,10 @@
     
-  %7D%0A  
+%7D%0A
     
@@ -464,18 +464,16 @@
  null;%0A%0A
-  
   const 
@@ -514,26 +514,24 @@
 a =%3E (%7B%0A    
-  
 value: a,%0A  
@@ -528,26 +528,24 @@
 lue: a,%0A    
-  
 label: a%0A   
@@ -547,18 +547,14 @@
 a%0A  
- 
- 
 %7D));%0A%0A
-  
   re
@@ -560,18 +560,16 @@
 eturn (%0A
-  
     %3Cdiv
@@ -584,34 +584,32 @@
 me=%22row%22%3E%0A      
- 
- 
 %3Cdiv className=%22
@@ -637,26 +637,24 @@
 /div%3E%0A      
-  
 %3Cdiv classNa
@@ -668,18 +668,16 @@
 -sm-9%22%3E%0A
-  
         
@@ -703,18 +703,16 @@
         
-  
 isCleara
@@ -715,18 +715,16 @@
 earable%0A
-  
         
@@ -739,18 +739,16 @@
 %7Bvalue%7D%0A
-  
         
@@ -786,18 +786,16 @@
         
-  
 onChange
@@ -800,13 +800,8 @@
 ge=%7B
-this.
 hand
@@ -831,15 +831,11 @@
     
-  
 /%3E%0A
-  
     
@@ -843,26 +843,24 @@
  %3C/div%3E%0A    
- 
- 
 %3C/div%3E%0A    )
@@ -860,15 +860,124 @@
 %3E%0A  
-  );%0A  %7D
+);%0A%7D%0A%0AArchetype.propTypes = %7B%0A  archetype: PropTypes.string.isRequired,%0A  updateArchetype: PropTypes.func.isRequired
 %0A%7D
+;
 %0A

Rewrite Archetype as function component