How to do API call in react js

Question

I have recently moved from Angular to ReactJs. I am using jQuery for API calls. I have an API which returns a random user list that is to be printed in a list.

I tried the following but I am not getting any output.

Below is my code:

import React from 'react';

export default class UserList extends React.Component {    
  constructor(props) {
    super(props);
    this.state = {
      person: []
    };
  }

  UserList(){
    return $.getJSON('https://dey.me/api/')
    .then(function(data) {
      return data.results;
    });
  }

  render() {
    this.UserList().then(function(res){
      this.state = {person: res};
    });
    return (
      <div id="layout-content" className="layout-content-wrapper">
        <div className="panel-list">
          {this.state.person.map((item, i) =>{
            return(
              <h1>{item.name.first}</h1>
              <span>{item.cell}, {item.email}</span>
            )
          })}
        <div>
      </div>
    )
  }
}

I am not sure how to write my API calls. So how can I do API call?

Answer 1

Hello,

Use fetch method inside componentDidMount to update state:

componentDidMount(){
  fetch('https://dey.me/api/')
      .then(({ results }) => this.setState({ person: results }));
}

Hope this work!!

If you need to know more about React, Its recommended to join React JS online course today.

Thank you!!