Question 117010 in Mongodb Question posted in
The official documentation can be found here.

Mongodb – Data not showing React Axios

I am trying to get data using axios but it doesn’t seem to load onto the page. I have used the link in postman and retrieves all the data so I assume the get request from the server is fine but when used in the jsx file it shows no data
here is my jsx file

index.js


import React from "react";
import { useState, useEffect } from "react";

import axios from 'axios'

export default function App() {
    const client = axios.create({
        baseURL: "http://localhost:8080/api/getUser" 
      });
      const [users, setPosts] = useState([]);

      useEffect(() => {
         client.get('?_limit=10').then((response) => {
            setPosts(response.data);
         });
      }, []);

  return (
    <div className="app">
    <h2>All Users 📫</h2>
    {users && users.length > 0 && users.map(({id, post}) => {
       return (
          <div className="post-card" key = {id}>
             <h2 className="post-title">{post.email}</h2>
             <p className="post-body">{post.firstName}</p>
             <div className="button">
                <div className="delete-btn">Delete</div>
             </div>
          </div>
       );
    })}
  </div>
  );
}
Tags:

2

Answers


  1. 0

    Check your response data structures before updating the App component state.

    Postcard UI can be shown if the item of the users array exists.

    I looking at the previous answer, and I think it can be fixed with the below codes.

    setPosts(response.data.userDetails);
    Login or Signup to reply.
  2. 0

    To have answer instead of comments:

    Error was due to data from API was coming with different structure, as per comments, JSON.stringify(response.data) was

    {
  "status": "Success",
  "data": {
    "userDetails": [
      {
        "_id": "62fb9702540785002e5fc5fd",
        "firstName": "testname1",
        "lastName": "testsurname",
        "email": "[email protected]",
        "password": "$2b$10$Kn/2VNNE7Q.HEsYSMgBk0u29r26SQ/AVQLGTuSvxj/rbB1o/Y9os2",
        "__v": 0
      },
      {
        "_id": "62fbb48aff187fc897d86147",
        "firstName": "test",
        "lastName": "test2",
        "email": "[email protected]",
        "password": "$2b$10$ZpOQihEkTHBMTKG1ZrWY2uuMVn/fK6Pp9QKc7RGgIxBdd/kdAuUti",
        "__v": 0
      }
    ]
  }
}

    So in order to set a list to a state the correct code should look like that:

    setPosts(response.data.data.userDetails);

    Next issue: destructuring of the map function was invalid. You have to destructure the exact properties you have in your object:

    <div className="app">
  <h2>All Users 📫</h2>
  {users &&
    users.length > 0 &&
    users.map(({ _id, firstName, lastName, email, password }) => {
      return (
        <div className="post-card" key={_id}>
          <h2 className="post-title">{email}</h2>
          <p className="post-body">{firstName}</p>
          <p className="post-body">{lastName}</p>
          <p className="post-body">{password}</p>
          <div className="button">
            <div className="delete-btn">Delete</div>
          </div>
        </div>
      );
    })}
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search