CODEWITHSUNDEEP
javascriptreactjs
Gayathri
Gayathri

Reputation: 1896

Fetch data with axios and export to a component as props

I am naive in react and i am struggling with a simple stuff, needing your help. All i need to do is to pass array of value from external service as prop to another

Approach

render() {
    let todolist="default";
   axios.get('http://localhost:8888/todoitems').then(function(res){
            todolist=res.data;
          });
  
    return (
      <div className="App">
        <input type="text" ref="newvalue"/>
         <button onClick={this.save}>Submit</button>
            <TodoList data={todolist} />
      </div>

    );
  }

What happens is, "default" is getting as this.props.data instead of response from external service.

Moreover, i get "Cannot set property 'state' of undefined when i try to set as state.Like below:

constructor(props){
        super(props);
        axios.get('http://localhost:8888/todoitems').then(function(res){
            this.state={
              data:res.data;
            }
          });
        }

Please help .

Upvotes: 0

Views: 1704

Answers (2)

Harry
Harry

Reputation: 5707

axios.get('http://localhost:8888/todoitems').then(function(res) {
    todolist=res.data;
});

The above piece of code is executed asynchronously. It does not pause the execution of the render() method. When the render() method reaches that code it makes a call to server and then immediately processes to return the JSX without waiting for the response from server.

I have seen many developers taking this approach. Maybe you should give it a try too.

constructor() {
    this.state = {todolist: "default"};
}

componentDidMount() {
    axios.get('http://localhost:8888/todoitems').then((res) => {
        this.setState({todolist: res.data});
    });
}

render() {
    return (
        <div className="App">
            <input type="text" ref="newvalue"/>
            <button onClick={this.save}>Submit</button>
            <TodoList data={this.state.todolist} />
        </div>
    );
}

Upvotes: 2

Shubham Khatri
Shubham Khatri

Reputation: 281784

your API request shouldn't be present in the render method since everytime you component updates, the render method is called and hence you API request is made again. You should make your API requests in componentDidMount lifecycle method and then update the state with the response which you can use in the render method. If you need to fire your API request at regular intervals, place it inside a setInterval method. P.S. Don't forget to clear the interval timer in the componentWillUnmount function

state = {
    todoList: "default"
}
componentDidMount() {
    axios.get('http://localhost:8888/todoitems').then((res) => {
            this.setState({todolist: res.data})
          });
}
render() {


    return (
      <div className="App">
        <input type="text" ref="newvalue"/>
         <button onClick={this.save}>Submit</button>
            <TodoList data={this.state.todolist} />
      </div>

    );
  }

Upvotes: 2

Related Questions