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

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

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;

CodePudding user response：

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>;
  ))}

CodePudding user response：

{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>;
            })}

map function have 2 paramater which the first is your element

CodePudding user response：

When you are mapping over an array of values, the order of the parameters of the map function should be maintained which is

map((user) => { ... })
map((user, index) => { ... })
map((user, index, array) => { ... })

In your code, you have mentioned the index parameter before the user parameter which will give you undefined when you try to access the user.[anything].

if you change the order of user and index, it should work.

also, some free advice on the code : using the index as the key is not one of the best approaches as mentioned in the official docs, you can read more about it here