calling an api in reactjs

Question

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.

Faysal Ahmed · Accepted Answer · 2016-12-11 04:57:02Z

1

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.

answered Dec 11, 2016 at 4:57

Faysal Ahmed

1,55213 silver badges28 bronze badges

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

Comments

user5738822 · Accepted Answer · 2016-12-11 04:56:32Z

0

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);
             });

             }


   }

answered Dec 11, 2016 at 4:56

user5738822

Comments

anytimecoder · Accepted Answer · 2016-12-11 09:27:16Z

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

Collectives™ on Stack Overflow

calling an api in reactjs

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related