Why data from database not displaying on screen

JavaScript
1

Hello;
I’m using React with axios and mysql. I’m trying to display data from the database. I’m managed to fetch the data and it shows the fetch data on my console.
But for some reason i’m finding it diffcult to show that fetched data on my webpage. I’ve looked around for issues but none seem to lead me to any help.

Picture1
Picture1903×255 46.3 KB

this is my front end code:

import React, { useEffect, useState } from “react”;
import axios from “axios”;

const Display = () => {
  const [user, setUser] = useState([]);

  useEffect(() => {
    axios
      .get("http://localhost:8081/login")
      .then((res) => {
        console.log(res.data); // debugging
        // Set user to res.data.user if it's an array, else set to an empty array
        setUser(Array.isArray(res.data.user) ? res.data.user : []);
      })
      .catch((err) => console.log(err));
  }, []);


  const userDetails = user.map((item) => (
    <tr key={item.id}> 
      <td>{item.id}</td>
      <td>{item.name}</td>
      <td>{item.email}</td>
      <td>{item.password}</td>
    </tr>
  ));

  return (
    <div>
      Update
      <div>
        <table className="table"> 
          <thead>
            <tr>
              <th scope="col">#</th>
              <th scope="col">Name</th>
              <th scope="col">Email</th>
              <th scope="col">Password</th>
            </tr>
          </thead>
          <tbody>
            {userDetails}
          </tbody>
        </table>
      </div>
    </div>
  );
};

export default Display;

and my backend:

app.get('/login', (req, res) =>{
    const sql = "SELECT * FROM login";
    db.query(sql, (err, data) => {
        if (err) {
            console.error(err);
            return res.json({ error: 'An error occurred' });
        }
        
        console.log(data);
        return res.json({ success: true, data: data });
    });
})
2

Welcome back to the forum @choudhmh

Try placing the key in a nested td like the others.

3

No no luck it did this still the same:

<td key={item.id}>{item.id}</td>
4

How about removing the key from the opening tag?

5 
 const userDetails = user.map((item) => (
    <tr> 
      <td key={item.id}></td>
      <td>{item.name}</td>
      <td>{item.email}</td>
      <td>{item.password}</td>
    </tr>

This you meant…no luck still.

Do you think any issues with this:

<tbody>
            {userDetails}
          </tbody>
6

Here is a post I found

Confused on how to actually get access to and display data from a fetch request in React - JavaScript - The freeCodeCamp Forum

7

fetch is good for api retrieval. I’m trying to use axios through database retrieval. look at hier api list its in an arrya which is much better as my one is coming from a database table it getting translated to object.
Their code did not function on my one

8

If the data format is an object, then the .map method may not work.

9

I convert it to array here.

Maybe i need to ditch axios and try with fetch only

10

I solved the issue. Small things as always. The code is below. Thanks for your help:

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

const Display = () => {
  const [user, setUser] = useState([]);

  useEffect(() => {
    axios
      .get("http://localhost:8081/login")
      .then((res) => {
        console.log(res.data); // debugging
        // Set user to res.data.user if it's an array, else set to an empty array
        setUser(Array.isArray(res.data.data) ? res.data.data : []);
      })
      .catch((err) => console.log(err));
  }, []);



  const userDetails = user.map((item, index) => (
    
       <tr key={index}>
      <td>{index+1}</td>
      <td>{item.id}</td>
      <td>{item.name}</td>
      <td>{item.email}</td>
      <td>{item.password}</td>
    </tr>
  ));

  return (
    <div>
      Update
      <div>
        <table className="table"> 
          <thead>
            <tr>
              <th scope="col">#</th>
              <th scope="col">Name</th>
              <th scope="col">Email</th>
              <th scope="col">Password</th>
            </tr>
          </thead>
          <tbody>
            {userDetails}
          </tbody>
        </table>
      </div>
    </div>
  );
};

export default Display;
1 Like
11

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.