content: import React from 'react';
  import axios from 'axios';
  import {Link} from 'react-router';
  import Spinner from 'react-spinkit';
  
  import Config from '../Config';
  
  class MainIngredients extends React.Component {
  
      constructor() {
          super();
          // Set initial state
          this.state = {
              main_ingredients: false
          };
  
          this.unmounted = false;
      }
  
      componentWillMount() {
          this.ServerRequest =
              axios
                  .get(`${Config.restURL}/main-ingredients/`)
                  .then(function (result) {
                      if (this.unmounted) {
                          return;
                      }
                      this.setState({
                          main_ingredients: result.data.main_ingredients
                      });
                  }.bind(this))
                  .catch(function (response) {
                      // something went wrong
                  });
  
      }
  
      componentWillUnmount() {
          this.unmounted = true;
      }
  
      render() {
          let {main_ingredients} = this.state;
  
          if (false === main_ingredients) {
              return (
                  <div className="main-ingredients">
                      <div id="loading">
                          <Spinner spinnerName="three-bounce"/>
                      </div>
                  </div>
              );
          }
  
          return (
              <div>
                  <h3>
                      <span className="text">Main Ingredients</span>
                  </h3>
                  <ul className="main-ingredients">
                      {
  
                          Object
                              .keys(main_ingredients)
                              .map(function (key) {
                                  let main_ingredient = main_ingredients[key];
                                  return (
                                      <li key={key}>
                                          <Link to={`/main-ingredients/${main_ingredient.ID}`}>{main_ingredient.name}</Link>
                                      </li>
                                  );
                              })
                      }
                  </ul>
              </div>
          )
      }
  }
  
  export default MainIngredients;