title: Inject services in React Components
body: <p>Consider the following scenario:</p>
  
  <pre class="lang-js prettyprint-override"><code>import axios from 'axios';
  import React, { Component } from 'react';
  
  class Api
  {
    constructor () {
      this.state = {
        token: null,
        endpoint: process.env.REACT_APP_API_ENDPOINT
      };
    }
  
    request (method, data, uri, headers) {
      uri = uri.replace(/^\//, '');
  
      return axios({
        method: method,
        url: this.state.endpoint + "/" + uri,
        data: data,
        headers: Object.assign({}, headers, { Authorization: "Bearer TESET TOKEN" })
      });
    }
  }
  
  export default Api; 
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>import React, { Component } from 'react';
  import LocaleStringsService from '../Services/LocaleStringsService.js';
  import LocaleStringsList from '../Components/LocaleStringsList.js';
  
  class Translate extends Component
  {
      constructor(props) {
          super(props);
  
          this.state = {
              strings: []
          }
  
          this.stringsService = new LocaleStringsService();
      }
  
    [...]
  
    render () {
        return (
           &lt;LocaleStringsList updater={this.stringsService.bulk} locale={this.props.match.params.locale} strings={this.state.strings} /&gt;
        );
    }
  }
  
  export default Translate;
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>import React, { Component } from 'react';
  import LocaleStringsListItem from './LocaleStringsListItem.js';
  
  class LocaleStringsList extends Component {
    constructor (props) {
      super(props);
  
      [...]
  
      this.onSubmit = this.onSubmit.bind(this);
  
      [...]
    }
  
    onSubmit (e) {
      e.preventDefault();
      this.props.updater(this.props.locale, this.props.strings);
    }
  
    [...]
  
    render () {
      [...]
  
      return (
        &lt;form onSubmit={that.onSubmit} [...]&gt;
          [...]
        &lt;/form&gt;
      );
    }
  }
  
  export default LocaleStringsList;
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>import React, { Component } from 'react';
  import LocaleString from '../Entities/LocaleString.js';
  import Api from '../Services/Api.js';
  
  class LocaleStringsService extends Component
  {
    constructor (props) {
      super(props);
  
      this.api = new Api();
    }
  
    [...]
  
    bulk (locale, locales) {
      let data = [];
  
      [...]
  
      return this.api.request('PATCH', data, '/locales/' + locale + '/strings', {})
        .then(function (response) {
          console.log(response);
        });
    }
  }
  
  export default LocaleStringsService;
  </code></pre>
  
  <p>This is the error:</p>
  
  <pre><code>LocaleStringsService.js TypeError: Cannot read property 'request' of undefined
  </code></pre>
  
  <p>There is definitely some issues with scope and the usage of <code>this</code> while passing the function. </p>
  
  <p>I have attempted to use the Context API however failing miserably. </p>
  
  <p>How do I do this properly?</p>