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}&#8209;{element.Email}
              &#8209;{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()

CodePudding user response：

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}&#8209;{element.Email}
              &#8209;{element.Message}
            </div>
          );
        })}
    </div>

CodePudding user response：

You implementation ok it's work with [{"Name":"T","Email":"[email protected]","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}&#8209;{element.Email}
              &#8209;{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>

CodePudding user response：

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.

CodePudding user response：

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;