Search Form React

by ddrraaggaa

HTML

<script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
<div id="app"></div>

Babel + JSX

class SearchForm extends React.Component {
  handleSubmit = (event) => {
    event.preventDefault();
    const output = document.createElement('div');
    const data = [...event.target.elements].reduce((data, element) => {
      if (element.name && element.value) {
        data[element.name] = element.value;
      }
      return data;
    }, {});
    output.textContent = JSON.stringify(data);
    document.body.appendChild(output);
  };
  render() {
    return (
      <form action="/search" onSubmit={this.handleSubmit}>
        <input type="text" name="q" />
        <select name="category">
          <option value="" selected>Category</option>
          <option value="cats">Cats</option>
          <option value="dogs">Dogs</option>
        </select>
        <button>Find</button>
      </form>
    );
  }
}

ReactDOM.render(<SearchForm />, document.getElementById('app'));