How do I show my get request data in frontend? - reactjs

Question

This is my code to show the get request data in frontend
import React, { useEffect, useState } from "react";
import axios from "axios";
const Users = () => {
const [users, setusers] = useState({ collection: [] });
const [Error, setError] = useState();
useEffect(() => {
axios
.get("http://127.0.0.1:5000/users/users-list")
.then((response) => {
console.log(response.data);
// console.log(response.status);
// console.log(response.statusText);
// console.log(response.headers);
// console.log(response.config);
setusers({ collection: response.data });
return response.data;
})
.catch((error) => {
console.log({ Error: error });
setError(error);
// return error;
});
}, []);
return (
<div>
{users.collection.length > 0 &&
users.collection.map((element, i) => {
return (
<div key={i}>
{element.Name}‑{element.Email}
‑{element.Message}
</div>
);
})}
{Error && <h2>{Error}</h2>}
</div>
);
};
export default Users;
As you can see in the following code I am trying to display my get data in the browser web page .
but its is not displaying in the browser but showing in console.log()

Answer 1

First of all dont make variable starts with capital letter as you have used Error (which refers to Error class in JavaScript) in useState.
You can show component with different state as follows:
const [isLoading, setIsLoading] = useState(false);
const [users, setUsers] = useState([]);
const [error, setError] = useState("");
useEffect(() => {
setIsLoading(true);
axios.get("http://127.0.0.1:5000/users/users-list")
.then((res => {
setUsers(res.data);
setIsLoading(false);
})
.catch(err => {
setError(err.response.data);
setIsLoading(false);
}
},[]);
if (isLoading) {
return <LoadingComponent />
}
if (error !== "") {
return <h1>{error}</h1>
}
if (users.length < 1) {
return <h1>There is no user.</h1>
}
return <div>
{users.collection.map((element, i) => {
return (
<div key={i}>
{element.Name}‑{element.Email}
‑{element.Message}
</div>
);
})}
</div>

Answer 2

You implementation ok it's work with [{"Name":"T","Email":"t#email.com","Message":"T user"}] API response format. Just check what is API response in your end, It should render the results.
I have notice catch block you have to set error message instead of Err object
import React, { useEffect, useState } from 'react';
import axios from 'axios';
const Users = () => {
const [users, setusers] = useState({ collection: [] });
const [Error, setError] = useState('');
useEffect(() => {
axios
.get('https://63a0075424d74f9fe82c476c.mockapi.io/api/collection/Test')
.then((response) => {
console.log(response.data);
// console.log(response.status);
// console.log(response.statusText);
// console.log(response.headers);
// console.log(response.config);
setusers({ collection: response.data });
})
.catch((error) => {
console.log({ Error: error });
setError('Something went wrong');
// return error;
});
}, []);
return (
<div>
{users.collection.length > 0 &&
users.collection.map((element, i) => {
return (
<div key={i}>
{element.Name}‑{element.Email}
‑{element.Message}
</div>
);
})}
{Error && <h2>{Error}</h2>}
</div>
);
};
export default Users;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 3

I tested your code (with a different API) and could not find any issues. As you can see in the codesandbox, the values appear on the screen:
https://codesandbox.io/s/wonderful-ganguly-5ecbid?file=/src/App.js
I noticed that you capitalised the object properties, Name, Email and Message. Perhaps this caused you the issue. You will need to check the console logged object to see whether the properties are capitalised or not. Usually, they will not be. So you would call them like this: element.name, element.email and element.message.

Answer 4

I guess your response data is maybe your problem. I don't know what is your response but it must be array.
I have replace the axios url with some other fake urls and it worked. but remember that the user.collection must be array. Therefor, you need to make sure that response.data is array. Otherwise, you need to set response.data as array in user.collection.
import React, { useEffect, useState } from "react";
import axios from "axios";
const Users = () => {
const [users, setusers] = useState({ collection: [] });
const [Error, setError] = useState();
useEffect(() => {
axios
.get("https://jsonplaceholder.typicode.com/todos/1")
.then((response) => {
console.log(response.data);
setusers({ collection: [response.data] });
return response.data;
})
.catch((error) => {
console.log({ Error: error });
setError(error);
// return error;
});
}, []);
return (
<div>
{users.collection.length > 0 &&
users.collection.map((element, i) => {
return <div key={i}>{element.title}</div>;
})}
{Error && <h2>{Error}</h2>}
</div>
);
};
export default Users;