fetch

var baseURL = 'http://swapi.co/api';


var service = {
  get: function(url) {
      return fetch(baseURL + url)
      //returning a promise
      //function callback that will promise us something
      .then(function(response) {
            return response.json();
        });
    }
};

module.exports = service;

main component

var React = require('react');
var Search = require('./Search.jsx')
var Img = require('./Img.jsx');
var Info = require('./Info.jsx');
var HTTP = require('../services/api');

var UI = React.createClass({

  getInitialState: function() {
      return {
        people: []
      }
  },

  // THIS WILL RETURN API JSON DATA BEFORE FIRST RENDER
  componentDidMount: function() {
    //GRAB THE URL
      HTTP.get('/people')
      //THEN GRAB THE URL DATA
        .then(function(data) {
          //SET STATE FROM INITIAL TO DATA RECEIVED
          console.log(data);
            this.setState({
              people: data
              //BIND THIS OR 'THIS' REFERS TO THE FUNCTION
            });
        }.bind(this));
         console.log(this.state.people) // empty
  },

  filterByName: function(name) {
    var filtered = this.state.people.filter(function(name) {
      return obj.name.indexOf(name) > -1;
    });
    console.log(this.state.people)
    return ({filtered});
    console.log(filtered);

  },

  render: function() {

      return (
        <div className="ui">
          <header className="search-bar">
            {/*SEARCH BAR TO LOOK UP API INFO*/}
            <Search onNewSearch={this.filterByName} characters={this.state.people} />
          </header>
          <input type="submit" value="search" onClick={this.filterByName} />
          <Img />
          <Info />
        </div>
    );
  }
});

module.exports = UI;