gistfile1.txt

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

var UI = React.createClass({

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

  componentDidMount: function() {
    //GRAB API DATA
    fetch('http://swapi.co/api/people')
      .then(function(response) {
        return response.json()
      })
      .then(function(json) {
        //SET STATE TO RECEIVED JSON DATA
        this.setState({ people: json });
        console.log(json);
        //BIND THIS ELSE IT WILL REFER TO THE FUNCTION
      }.bind(this))
      .catch(function(err) {
        console.log(err);
      })
  },

  currentlySelectedPerson: function() {
    console.log('currently selected person');
  },

  render: function() {

      return (
        <div className="ui">
          <header className="search-bar" onClick={this.testData}>
            {/*<h1>{filtered}</h1>*/}
            {/*SEARCH BAR TO LOOK UP API INFO*/}
            <Search characters={this.state.people} selected={this.currentlySelectedPerson}/>
          </header>
          <Img />
          <Info characters={this.state.people}/>
        </div>
    );
  }
});

module.exports = UI;

gistfile2.txt

var React = require('react');


var Search = React.createClass({

    getInitialState: function() {
      return {
        value: '',
        isExpanded: false
      }
    },

    handleOnChange: function(e) {
      this.setState({
        value: e.target.value,
      });
    },

    render: function() {
      if (this.props.characters.length <= 0) {
        return this.renderLoading();
      } else {
        return this.renderSearch();
      }
    },

    renderLoading: function() {

      return (
        <div>
          ...loading data...
        </div>
      )
    },

    expandOnFocus: function() {
      this.setState({isExpanded: true});
    },

    expandOnBlur: function() {
      this.setState({isExpanded: false});
    },

    renderSuggestionList: function() {
        //Desired name equals input value
        var desiredName = this.state.value;
        //Filter through results array for matching name, return name if it exists.
        var matchingResults = this.props.characters.results.filter(function(result) {
          console.log(desiredName);
          return result.name.toLowerCase().indexOf(desiredName) !== -1;
        });

        var isExpanded = this.state.isExpanded;
        return matchingResults.map(function(matchingResult, i) {
            return (
                <div value={isExpanded}  className="list-of-names" key={i}>
                    <div className="name" onClick={this.props.selected} >{matchingResult.name}</div>
                </div>
            )
        });
    },


    renderSearch: function() {

        return (
            <div>
                <img className="search-icon" src="https://cdn3.iconfinder.com/data/icons/ecommerce-5/100/search-01-128.png" width="16px" height="16px" />
                <input type="text" className="search" placeholder="Search..." value={this.state.value} onChange={this.handleOnChange} onFocus={this.expandOnFocus} onBlur={this.expandOnBlur} />
                {/*Return the name of each object*/}
                {this.state.isExpanded ? this.renderSuggestionList() : null}
            </div>
        );
    }

});

module.exports = Search;