React JS Rest Api Call

Question

We have made a simple application that supports CRUD operations on a student model(Get Student by ID, Delete Student by ID etc). Can someone help with how to make a simple restful api call to the endpoint(http://ip:port/allstudents) and render the obtained json format in React UI? My code is as follows:

import React, { Component } from 'react';
import './App.css';
class App extends Component {
Getfunction() {
<a href="http://www.stackoverflow.com/">
<button>b1</button>
</a>
}
render() {
return (
<div>
  <button id='b1'
    style={{fontSize: 20, color: 'green'}}
    onClick={() => this.Getfunction()}>
    Get!
  </button>
);
}
}

export default App;

Where can I put my restful api call to query and how exactly?

I have done that before posting the question here. But the examples were not clear enough.I have edited my question to be more precise! — Nagireddy Hanisha
– Nagireddy Hanisha, Commented Mar 30, 2017 at 5:06
You might want to look at how to ask good questions React is a library for building user interfaces, And hence you don't use 'react' to do computation and stuff like network calls. Feel free to use functionalities such as async/await or use fetch to collect data from a url. Look at the documentation for fetch developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch. — Isaac Osiemo
– Isaac Osiemo, Commented Mar 30, 2017 at 5:07
This is such a common problem (that I and many of us have struggled with when working with CRUD apis) that I created a library to try to simplify this for all of us: github.com/DigitalGlobe/jetset — glortho
– glortho, Commented May 16, 2017 at 19:19

WitVault · Accepted Answer · 2017-03-30 05:16:27Z

3

I would suggest you to make api call in life cycle method componentDidMount and when api call returns some data set it to your state and let your user interface update accordingly.

E.g your api call method may be like this -

ApiCall() {
    return $.ajax({
       url: 'http://ip:port/allstudents',      
       type: 'GET',
    }).fail((responseData) => {
        if (responseData.responseCode) {
            console.error(responseData.responseCode);
        }
    });
}

After new data is fetched from server set the state with new data

this.setState({data:newDataFromServer});

Basically above call will return you a jquery promise which you can use later.

Now in what ever method you want to make ApiCall just use like this -

class App extends Component {

 constructor() {
   this.state = {
      data : []
   }
 }
 componentDidMount()
 {
   this.getFunction();
 }

 getFunction = () => {
     this.ApiCall()
        .then(
            function(data){
              console.log(data);
              // set the state here
              this.setState({data:data});
            },
            function(error){
              console.log(error);
           }
    );
 }

 render() {
   return (
      <div>
        <button id='b1'
           style={{fontSize: 20, color: 'green'}}
           onClick={() => this.Getfunction()}>
        Get!
     </button>
     {/* Now render your data here using jsx if it is array iterate over it */}
    </div>
   );
 }
}

edited Mar 30, 2017 at 5:16

answered Mar 30, 2017 at 5:07

WitVault

24.2k20 gold badges107 silver badges137 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nagireddy Hanisha Over a year ago

Thanks! Will try this out

Collectives™ on Stack Overflow

React JS Rest Api Call

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related