import React from 'react';
import PropTypes from 'prop-types';
import Input from 'react-toolbox/lib/input/Input';

const sectionStyle = {
  marginLeft: "2.5rem",
  marginRight: "2.5rem",
}
const SearchForm = (props) => (
  <section style={sectionStyle}>
    <form onSubmit={props.handleSubmit}>
      <Input 
        type='text' 
        label='Search by City' 
        value={props.city} 
        onChange={props.handleInputChange} 
        maxLength={200} />
    </form>
  </section>
);

export default SearchForm;

SearchForm.propTypes = {
  city: PropTypes.string.isRequired,
  handleSubmit: PropTypes.func.isRequired,
  handleInputChange: PropTypes.func.isRequired
}

import React from 'react';
import PropTypes from 'prop-types';
import Input from 'react-toolbox/lib/input/Input';

const sectionStyle = {
  marginLeft: "2.5rem",
  marginRight: "2.5rem",
}
const SearchForm = (props) => (
  <section style={sectionStyle}>
    <form onSubmit={props.handleSubmit}>
      <Input 
        type='text' 
        aria-label='Search'
        label='Search by City' 
        value={props.city} 
        onChange={props.handleInputChange} 
        maxLength={200} />
    </form>
  </section>
);

export default SearchForm;

SearchForm.propTypes = {
  city: PropTypes.string.isRequired,
  handleSubmit: PropTypes.func.isRequired,
  handleInputChange: PropTypes.func.isRequired
}

Add an aria-label attr to our input control for better accessibility.
Add an aria-label attr to our input control for better accessibility.
