import React from 'react'
import { PropTypes } from 'react'
const { string } = PropTypes

export default class Text extends React.Component {
  static defaultProps = {
    className: 'Text',
    value: '',
  }

  static propTypes = {
    id: string.isRequired,
    labelText: string.isRequired,
    name: string.isRequired,
    ariaDescribedby: string,
    className: string,
    value: string,
  }

  state = {
    value: this.props.value,
  }

  render() {
    const { className, ariaDescribedby, id, labelText, name } = this.props
    return (
      <div className={`${className} Text`}>
        <label className={`${className}__label Text__label`} htmlFor={id}>
          {labelText}
        </label>
        <input
          aria-describedby={ariaDescribedby}
          className={`${className}__text Text__text`}
          id={id}
          name={name}
          defaultValue={this.state.value}
          onChange={this.handleChange}
          type="text"
        />
      </div>
    )
  }
  handleChange = (event) => {
    this.setState({ value: event.target.value })
  }
}

@@ -67,16 +67,22 @@
 %7B string
+, func
  %7D = Pro
@@ -88,16 +88,16 @@
 opTypes%0A
-
 %0Aexport 
@@ -205,16 +205,44 @@
 ue: '',%0A
+    handleChange: () =%3E %7B%7D,%0A
   %7D%0A%0A  s
@@ -422,16 +422,40 @@
 string,%0A
+    handleChange: func,%0A
   %7D%0A%0A  s
@@ -977,16 +977,17 @@
 e=%7Bthis.
+_
 handleCh
@@ -1050,16 +1050,17 @@
 )%0A  %7D%0A  
+_
 handleCh
@@ -1087,51 +1087,103 @@
     
-this.setState(%7B value: event.target.
+const value = event.target.value%0A    this.setState(%7B value %7D)%0A    this.props.handleChange(
 value
- %7D
 )%0A  

added onChange prop