Problems with fetch calls with Axios in React

Question

I am trying to use the https://api.randomuser.me/ API to get the data from a person. As for now, I am trying to get only his first and second names, and date of birth, but I don't know if I am doing the call to the API wrong or what I am doing incorrectly. This is the code I have:

import Axios from 'axios'
import { useState } from 'react';

function FetchCall() {
  
  const[name,setName] = useState("")
  const[birth,setBirth] = useState("")

  const getInfo = () => {
  Axios.get("https://api.randomuser.me/").then(
    (response) => {
      setName(response.results.name.first + " " + response.results.name.last);
      setBirth(response.dob.date);
    }
  );
};

  return(
    <div>
      Hello 
      <button onClick={getInfo}>Get User</button>
      {name}
      {birth}
    </div>
  );
}

export default FetchCall;

I am getting a "Unhandled Rejection (TypeError): Cannot read property 'name' of undefined" error when clicking on the button.

Yehor Androsov · Accepted Answer · 2020-11-07 13:24:53Z

1

Axios response stores response json in .data field

response.results should be changed into response.data.results

Also, just a note, results is an array, so you need to apply indexer as well. For example, response.data.results[0].name.first

Check out React dev tools to set breakpoints and find which item in sequence is undefined

edited Nov 7, 2020 at 13:24

answered Nov 7, 2020 at 13:17

Yehor Androsov

6,1862 gold badges30 silver badges56 bronze badges

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

Collectives™ on Stack Overflow

Problems with fetch calls with Axios in React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related