1

When I want to access this route http://localhost:3000/programari I get map undefined. I have my object in mmonboDB and I want to display it in a tabel through a map , I don't understand why I can't make it work. I tried to find it here on stack , but I did not succeeded. I didn't use props

When I want to access this route http://localhost:3000/programari I get map undefined. I have my object in mmonboDB and I want to display it in a tabel through a map , I don't understand why I can't make it work. I tried to find it here on stack , but I did not succeeded. I didn't use props

Here is the code :

import Header from "../../header/Header";
import React, { useState, useEffect } from "react";
import axios from "axios";
import { useSelector, useDispatch } from "react-redux";

import {
  fetchAllUsers,
  dispatchGetAllUsers,
} from "../../../redux/actions/usersAction";

function Profile() {
  const auth = useSelector((state) => state.auth);
  const token = useSelector((state) => state.token);

  const [values, setValues] = useState([
    {
      date: "",
      email: "",
      firstName: "",
      hour: "",
      lastName: "",
      phoneNumber: "",
    },
  ]);

  const { user, isAdmin } = auth;

  const [callback, setCallback] = useState(false);

  const dispatch = useDispatch();

  useEffect(() => {
    if (isAdmin) {
      fetchAllUsers(token).then((res) => {
        dispatch(dispatchGetAllUsers(res));
      });
    }
  }, [token, isAdmin, dispatch, callback]);

  useEffect(() => {
    fetch("/programari")
      .then((res) => {
        if (res.ok) {
          return res.json();
        }
      })
      .then((jsonRes) => setValues(jsonRes));
  });

  return (
    <>
      <div>
        <div className="App">
          <Header />

          <div className="profile_page">
            <h2>
              {isAdmin ? "Programari" : "Ne bucuram sa va avem client fidel"}
            </h2>

            <div style={{ overflowX: "auto" }}>
              <table className="customers">
                <thead>
                  <tr>
                    <th>Nume</th>
                    <th>Prenume</th>
                    <th>Telefon</th>
                    <th>Email</th>
                    <th>Data</th>
                    <th>Ora</th>
                  </tr>
                </thead>
                <tbody>
                  {values.map((value) => (
                    <tr>
                      <td>{value.date}</td>
                      <td>{value.email}</td>
                      <td>{value.firstName}</td>
                      <td>{value.hour}</td>
                      <td>{value.lastName}</td>
                      <td>{value.phoneNumber}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

export default Profile;
viorel Grigoras
  • 19
  • 6
  • 4
    The error means that at some point when `values.map()` is called, `values` isn't an array. This question is asked at least once per week. Googling "cannot read property 'map' of undefined site:stackoverflow.com" gives 45.800 results. –  Sep 01 '21 at 20:01
  • 1
    values is not an array. It starts as one, so maybe your jsonRes is not what you think it is. console.log that value and let us know – Tushar Shahi Sep 01 '21 at 20:21
  • when using an array of react elements, you should specify the `key` property to each element – Olivier Boissé Sep 01 '21 at 20:48
  • Does this answer your question? [Error : Cannot read property 'map' of undefined](https://stackoverflow.com/questions/24706267/error-cannot-read-property-map-of-undefined) – NicoE Sep 01 '21 at 22:46
  • @OlivierBoissé I tried with a key , still doesn't work. – viorel Grigoras Sep 02 '21 at 17:30
  • @TusharShahi I get a array of objects https://prnt.sc/1r1yxfe , take a look – viorel Grigoras Sep 02 '21 at 17:32
  • @ChrisG I console log my values and is a array of objects . look here https://prnt.sc/1r1yxfe – viorel Grigoras Sep 02 '21 at 17:32
  • If it's not an array during a single re-render, the error will occur. Try adding an empty dependency array to the second `useEffect`, because right now it reruns during every state change. My guess is the response is not ok at some point and values ends up being `undefined` –  Sep 02 '21 at 18:06

1 Answers1

0

Check your API "/programari" which is not returning an array

Him Ho
  • 79
  • 1
  • 6