<file_sep>import React, { Component } from 'react';

class Searchbox extends Component {
  constructor(props) {
    super(props);
    this.state = {
      text: '',
      cities: {}
    }
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleChange(event) {
    this.setState({text: event.target.value});
  }
  handleSubmit(event) {
    alert('submitted: ' + this.state.text);
    event.preventDefault();
    // NEXT REDIRECT TO SEARCH
  }
  render() {
    return (
      <div class="row text-center mb-30 mt-30" onSubmit={this.handleSubmit}>
        <div class="col-sm-12">
          <form class="navbar-form" role="search">
            <div class="input-group add-on">
              <input class="form-control" placeholder="Search" name="srch-term" id="srch-term" type="text" value={this.state.text} onChange={this.handleChange} />
              <div class="input-group-btn">
                <button type="submit" class="btn btn-default">Search</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    );
  }
}

export default Searchbox;
<file_sep>import React, { Component } from 'react';

import Searchbox from "./Searchbox";
import Weather from "./Weather";

class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      keyword: "",
      cities: [
        { woeid: 2344116, name: 'Istanbul' },
        { woeid: 638242, name: 'Berlin' },
        { woeid: 44418, name: 'London' },
        { woeid: 565346, name: 'Helsinki' },
        { woeid: 560743, name: 'Dublin' },
        { woeid: 9807, name: 'Vancouver' }
      ]
    };
  }
  render() {
    return (
      <div class="page-container container mt-15">
        <div class="row">
          <div class="col-sm-12">
            <Searchbox keyword={this.state.keyword}/>
            <div class="row text-center">
            {this.state.cities.map((city, index) =>
              <Weather id={city.woeid} index="0"/>
            )}
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default Home;<file_sep># weather-react
simple weather app using reactjs
