CODEWITHSUNDEEP
javascriptreactjs
Sid
Sid

Reputation: 5843

calling an api in reactjs

I am just starting to learn react. As of now I am feeding some hard-coded data in my application which I want to get it replaced by some external api and load data accordingly. Here's what I have done so far. 

import axios from "axios";
class TodoStore extends EventEmitter{
    constructor() {
        super();
        this.todos = [
            {
                id: 123,
                text: "Go Shopping",
                complete: false
            },
            {
                id: 456,
                text: "Pay Bills",
                complete: false
            }
        ];
    }

getAll(){
        return this.todos;
    }

Now what I want to do is I want to implement https://jsonplaceholder.typicode.com/todos and assign all the returned results in my todos. So, what would be the proper way to do so? Any help will be appreciated.

Upvotes: 1

Views: 1275

Answers (3)

anytimecoder
anytimecoder

Reputation: 7704

If you're not using any framework (like Redux or Relay) componentDidMount is the best place to do it. From react Component Docs:

componentDidMount() is invoked immediately after a component is mounted. Initialization that requires DOM nodes should go here. If you need to load data from a remote endpoint, this is a good place to instantiate the network request. Setting state in this method will trigger a re-rendering.

Your class would look something like this:

import axios from "axios";

class TodoStore extends EventEmitter{
    constructor() {
        super();
        this.state = { todos: []} //initial todos - an empty array in state
    }

    componentDidMount() {
        axios.get('https://jsonplaceholder.typicode.com/todos')
        .then(function (data) {
            this.setState({
                todos: data //set the received todos to state
            }) 
         })
         .catch(function (error) {
             console.log(error);
         });
     }

    getAll(){
        return this.state.todos; //get todos from state
    }
}

More on state: https://facebook.github.io/react/docs/state-and-lifecycle.html

Upvotes: 0

Faysal Ahmed
Faysal Ahmed

Reputation: 1542

There are so many ways you can achieve what you want. As you've just started react, you probably want to play with just react changing states and props.

you can directly call axios get method in componentDidMount or componentWillMount and save the states in your react component.

As your project grows, you might want to try more future proof and easy to maintain solution like implementing Redux.

Upvotes: 1

user5738822
user5738822

Reputation:

first thing i should say you that is please use react state and then you should know react Life Cycle: 

import axios from "axios";
class TodoStore extends EventEmitter{

            componentDidMount () {

               axios.get('your url')
              .then(function (response) {
                 this.setState({
                   todos : response
                 });
                /// and you can get response with this.state.todos in your class
              })
             .catch(function (error) {
                console.log(error);
             });

             }


   }

Upvotes: 0

Related Questions