app.jsx

/* eslint-disable no-console */
import React from 'react';
import { Link } from 'react-router';
import { Container, Dimmer, Loader } from 'semantic-ui-react';
import SearchBox from './SearchBox';
import Card from './Card';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      cities: {},
      active: false
    };
    this.addCity = this.addCity.bind(this);
  }
  isLoading(active) {
    this.state.active = active;
    this.setState({ active : this.state.active });
  }
  addCity(city) {
    this.state.cities = city;
    this.setState({ cities: this.state.cities });
  }
  showCities(cities) {
    this.setState({ cities });
  }
  renderCity(key) {
    return <Card key={key} index={key} details={this.state.cities[key]} />;
  }
  render() {
    return (
      <div>
        <header>
          <h1>Flip</h1>
          <Link to="/about">About</Link>
        </header>
        <section>
          <Dimmer active>
            <Loader />
          </Dimmer>
          <SearchBox addCity={this.addCity} />
          {Object.keys(this.state.cities).map(this.renderCity)}
        </section>
      </div>
    );
  }
}

App.propTypes = {
  children: React.PropTypes.object
};

export default App;

Card.jsx

import React from 'react';

const Card = (props) => (
  <span> {props.index} | {props.details}</span>
);

Card.propTypes = {
  index: React.PropTypes.any,
  details: React.PropTypes.any
};

export default Card;

searchbox.jsx

/* eslint-disable no-console,key-spacing */
import React from 'react';
import 'whatwg-fetch';

class SearchBox extends React.Component {
  constructor(props) {
    super(props);
    this.createCity = this.createCity.bind(this);
  }

  createCity(e) {
    e.preventDefault();
    fetch(`https://jsonplaceholder.typicode.com/posts/${this.refs.cityName.value}`)
      .then((resp) => resp.json())
      .then((data) => {
        this.props.addCity(data);
        this.refs.cityForm.reset();
      });
  }

  render() {
    return (
      <div>
        <form ref="cityForm" onSubmit={this.createCity}>
          <input
            type="text"
            ref="cityName"
          />
          <input
            type="submit"
            value="Go"
          />
        </form>
      </div>
    );
  }
}
SearchBox.propTypes = {
  addCity: React.PropTypes.func
};

export default SearchBox;