Not able to convert response data into JSON - reactjs

Question

I'm able to get response from API, but not able to convert response into Json and not able to return the data. It simply return null.
const responseData = async () => {
try{
const response = await axios.get('https://randomuser.me/api')
console.log(response) // console object
const jsonData = await response.json()
return jsonData;
}catch(err){
console.error(err)
}
}
export default function App() {
const [randomUserDataJson,setRandomUserDataJson] = useState('')
useEffect( () => {
responseData().then(randomdata => {
setRandomUserDataJson(randomdata || 'not found')
})
}, []);
return (
<div >
<pre>
<p>{randomUserDataJson}</p>
</pre>
</div>
);
}
Output
not found

Answer 1

You can directly return the axios response nothing but the promise and access the result using then method.
import axios from "axios";
import { useEffect, useState } from "react";
import "./styles.css";
export default function App() {
const [randomUserDataJson, setRandomUserDataJson] = useState("");
useEffect(() => {
responseData().then((randomdata) => {
const data = JSON.stringify(randomdata.data);
setRandomUserDataJson(data || "not found");
});
}, []);
return (
<div>
<pre>
<p>{randomUserDataJson}</p>
</pre>
</div>
);
}
const responseData = async () => {
try {
const response = await axios.get("https://randomuser.me/api");
return response;
} catch (err) {
console.error(err);
}
};
codesandbox - https://codesandbox.io/s/withered-bush-iicqm?file=/src/App.js

Answer 2

You don't have to do const jsonData = await response.json(), axios will deserialize the response to JS Object for you. Just remove that line and it would work. Also, you can't render JS object as a child of a React Component, so it has to be stringified.
import axios from 'axios';
import { useState, useEffect } from 'react';
const responseData = async () => {
try{
const response = await axios.get('https://randomuser.me/api')
console.log(response) // console object
return response;
}catch(err){
console.error(err)
}
}
export default function App() {
const [randomUserDataJson,setRandomUserDataJson] = useState('')
useEffect( () => {
responseData().then(randomdata => {
setRandomUserDataJson(randomdata || 'not found')
})
}, []);
return (
<div >
<pre>
<p>{JSON.stringify(randomUserDataJson, null, 2)}</p>
</pre>
</div>
);
}