SimpleAddNewForm-solution

solution.js

import React, { Component, PropTypes } from 'react';

class SimpleAddNewForm extends Component {
  constructor(props) {
    super(props);
    this.state = { value: '' }

    this.handleChange = () => this._handleChange();
    this.handleClick = () => this._handleClick();
  }

  _handleChange(e) {
    this.setState({ value: e.target.value });
  }

  _handleClick() {
    this.props.handleSubmit(this.state.value);
  }

  render() {
    this.inputField = <input placeholder={this.props.inputFieldPlaceholder}
                             value={this.state.value}
                             onChange={this.handleChange} />

    this.button = <button onClick={this.handleClick} disabled={!this.state.value} >{this.props.title}</button>

    return (
      <div className='add-new-form'>
        {this.inputField}
        {this.button}
      </div>
    );
  }
}

SimpleAddNewForm.PropTypes = {
  title: PropTypes.string.isRequired,
  inputFieldPlaceholder: PropTypes.string.isRequired,
  handleSubmit: PropTypes.func.isRequired
};

export default SimpleAddNewForm;