@upendradevsingh/webcore/docs/src/components/Request/index.js

UI Core Components for web

import React, { Component } from 'react';
import request from '../utils/request';

export default class Container extends Component {
  constructor(props) {
  	super(props);
    this.state = { 
      defaultMessage : 'Fetching data from the server',
      users: null
    };
  }
	
  componentWillMount(){
    request
    .get('https://jsonplaceholder.typicode.com/users')
    .then(response => this.setState({users: response.data}))
    .catch(() => this.setState({defaultMessage: 'No Response from the server'}));
  }

  render() {
    const styles = {
      h2 : {
        margin :0,
        padding: 0
      }
    }
    return (
        <article>
          <header>
            <h2 style={styles.h2}> Request </h2>
            <sub> Request Component will enable client to communicate with server using XMLHttpRequest</sub>
          </header>
          <figure class="highlight">
            
<pre>
<code class="language-js" data-lang="js">
<strong>request#get()</strong>

{`

    request
    .get('https://jsonplaceholder.typicode.com/users')
    .then(response => this.setState({users: response.data}))
    .catch(err => this.setState({defaultMessage: 'No Response from the server'}));`}
  </code>
</pre>
            </figure>
          

            <p>{!this.state.users && this.state.defaultMessage}</p>
            {this.state.users && 
            <div>
            <h3> Users </h3>
            <ul>
              {this.state.users.map(user => {
                return <li key={user.id}> {user.name} </li>;
              })}
            </ul></div>}
        </article>      
    );
  }
}