How to do API call in react js

0 votes

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?

May 18, 2020 in Java-Script by kartik
• 37,510 points
1,911 views

1 answer to this question.

0 votes

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!!

answered May 18, 2020 by Niroj
• 82,880 points

Related Questions In Java-Script

0 votes
1 answer

How do I pass command line arguments to a Node.js program?

Hello @kartik, If your script is called myScript.js ...READ MORE

answered May 5, 2020 in Java-Script by Niroj
• 82,880 points
2,887 views
0 votes
1 answer

How to use Redirect in the new react-router-dom of Reactjs?

Hello, To navigate to another component you can ...READ MORE

answered May 18, 2020 in Java-Script by Niroj
• 82,880 points
8,401 views
0 votes
1 answer

How to create dynamic href in react render function?

Hello @kartik, Use string concatenation: href={'/posts/' + post.id} The JSX ...READ MORE

answered May 18, 2020 in Java-Script by Niroj
• 82,880 points
10,511 views
+1 vote
1 answer

How to Check synchronously if file/directory exists in Node.js?

Hello, You can use fs.existsSync(): const fs = require("fs"); // ...READ MORE

answered May 28, 2020 in Java-Script by Niroj
• 82,880 points
1,611 views
+1 vote
1 answer

How to make anchor tag with routing using Laravel?

Hey @kartik, First you have to go to ...READ MORE

answered Mar 18, 2020 in Laravel by Niroj
• 82,880 points
21,704 views
0 votes
1 answer

What is redirection in Laravel?

Named route is used to give specific ...READ MORE

answered Mar 18, 2020 in Laravel by Niroj
• 82,880 points
2,630 views
0 votes
1 answer

How to install Laravel via composer?

Hello, This is simple you just need to ...READ MORE

answered Mar 23, 2020 in Laravel by Niroj
• 82,880 points
2,486 views
+1 vote
1 answer

What are named routes in Laravel and How can specify route names for controller actions?

Hey @kartik, Named routing is another amazing feature of ...READ MORE

answered Mar 23, 2020 in Laravel by Niroj
• 82,880 points
41,148 views
0 votes
1 answer

How do I turn a string to a json in Node.js?

Hello Kartik, Use the JSON function  JSON.parse(theString) ...READ MORE

answered Apr 24, 2020 in Java-Script by Niroj
• 82,880 points
751 views
0 votes
1 answer

How to access PHP session variables from jQuery function in a .js file?

Hello, You can produce the javascript file via ...READ MORE

answered Apr 29, 2020 in Java-Script by Niroj
• 82,880 points
12,212 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP