title: react js - How to do Service layer call
body: <p>I am trying to segregate below <code>axios</code> function to a separate service layer. Pls suggest how to do this in react js ?</p>
  
  <pre><code>class xxx extends Component {
  constructor(props) {
      super(props)
      this.state = {
          ownerName: '',
      }
      this.handleKeyUp = this.handleKeyUp.bind(this)
  }
  
  handleKeyUp(e) {
      if (e.target.value.length &gt; 4) {
          var self = this
          axios.get(`/https://exampleService.com/${e.target.value}`)
              .then(function (response) {
                  self.setState({ownerName: response.data['name']})
              })
              .catch(function (error) {
                  if (error.response) {
                      if (error.response.status === 404) {
                          self.setState({ownerName: `\u2014`})
                      }
                  }
              })
      }
  }
  
  render () {
      return (
          &lt;div&gt;
              &lt;Input OnKeyUp={(event) =&gt; this.handleKeyUp(event)} &gt;&lt;/Input&gt;
          &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p>I tried to separate like below using <code>module.exports</code>, but I'm unable to get the output from module component and pass it to xxx component.</p>
  
  <pre><code>module.exports = {
      axios.get ......
      .....
  }
  </code></pre>