content: import React from 'react';
  import axios from 'axios';
  
  import Recipe from './Recipe';
  import Config from '../Config';
  import GoHomeButton from './GoHomeButton';
  
  class MainIngredient extends React.Component {
  
      constructor() {
          super();
          // Set initial state
          this.state = {
              data: {}
          };
  
          this.unmounted = false;
  
          this.fetchRecipes = this.fetchRecipes.bind(this);
      }
  
      fetchRecipes() {
          this.serverRequest =
              axios
                  .get(`${Config.restURL}/main-ingredients/${this.props.params.termID}`)
                  .then(function (result) {
                      if (this.unmounted) {
                          return;
                      }
                      this.setState({
                          data: result.data
                      });
                  }.bind(this))
                  .catch(function (response) {
                      // something went wrong
                  })
      }
  
      componentWillMount() {
          this.fetchRecipes();
      }
  
      componentDidUpdate(prevProps) {
          if (this.props.params.termID !== prevProps.params.termID) {
              this.fetchRecipes();
          }
      }
  
      componentWillUnmount() {
          this.unmounted = true;
      }
  
      render() {
          // if data is empty
          if (Object.keys(this.state.data).length === 0) {
              return (<div id="recipes" className="loading"></div>);
          }
          return (
              <div id="recipes">
                  <GoHomeButton />
                  <h1 className="headline">
                      <span className="text">
                          {this.state.data.total} <em>{this.state.data.name}</em> Recipes
                      </span>
                  </h1>
                  {
                      Object
                          .keys(this.state.data.recipes)
                          .map(key => <Recipe key={key} index={key} recipe={this.state.data.recipes[key]}/>)
                  }
              </div>
          )
      }
  }
  
  MainIngredient.propTypes = {
      params: React.PropTypes.object.isRequired
  };
  
  export default MainIngredient