Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

how to display response data in my frontend part in MERN Stack?

am trying to create a simple CRUD MERN Application, In this application data is display in my console , but I want to display it in my UI Part. please tell me how to display console part in in our frontend.

Please Check console data

AllUser.js

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

This is Alluser.js file where I want to display console data which is came from backend

import React, { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import { getUsers } from "./api";

const UserData = () => {
  const [users, setUser] = useState([]);

  useEffect(() => {
    AllUsers();
  }, []);

  const AllUsers = async () => {
    const response = await getUsers();
    console.log(response.data);
    setUser(response.data);
  };

  return (
    <div>
      <div className="container">
        <table className="table table-hover table-bordered mt-3">
          <thead>
            <tr>
              <th scope="col">No</th>
              <th scope="col">Name</th>
              <th scope="col">Email</th>
              <th scope="col">Phone</th>
              <th scope="col">Action</th>
            </tr>
          </thead>
          <tbody>
            {users.map((index,user) => {
              <tr key={index}>
                <th scope="row">{user.id}</th>
                <td>{user.email}</td>
                <td>{user.name}</td>
                <td>{user.phone}</td>
   
              </tr>;
            })}

           
          </tbody>
        </table>
      </div>
    </div>
  );
};

export default UserData;

>Solution :

It is not displaying, because of your map part. Try doing so :

  {users.map((user, index) => (
      <tr key={index}>
        <th scope="row">{user.id}</th>
        <td>{user.email}</td>
        <td>{user.name}</td>
        <td>{user.phone}</td>
      </tr>;
  ))}
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading