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

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

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

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

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

@@ -73,16 +73,24 @@
 ng, func
+, object
  %7D = Pro
@@ -241,16 +241,31 @@
  =%3E %7B%7D,%0A
+    error: %7B%7D,%0A
   %7D%0A%0A  s
@@ -469,16 +469,35 @@
 : func,%0A
+    error: object,%0A
   %7D%0A%0A  s
@@ -627,16 +627,128 @@
 s.props%0A
+%0A    const %7B message, valid %7D = this.props.error%0A    const errorFeedback = valid ? null : %3Cdiv%3E%7Bmessage%7D%3C/div%3E%0A%0A
     retu
@@ -792,16 +792,45 @@
 me%7D Text
+ $%7Bvalid ? 'valid' : 'error'%7D
 %60%7D%3E%0A    
@@ -1165,16 +1165,40 @@
      /%3E%0A
+        %7BerrorFeedback%7D%0A
       %3C/

support error messaging