Unable to map through dynamically created array through redux

user_13952031 0
Viewed 44

import "./admin.css";
import { HeaderAdmin } from "./header/header";
import Clients from "./clients/clients";
import { clientsRef } from "../../firebase/firebase";
import { useEffect } from "react";
import { connect } from "react-redux";
import { fetchClients } from "../../redux/clients-admin/clients-admin.actions";

const Admin = ({ fetchClients }) => {
  // const testList = [{ clientEmail: "john@unknown.com", clientName: "john" }];

  // console.log(testList);

  const clientData = () => {
    const clientsList = [];
    clientsRef.get().then((querySnapshot) => {
      querySnapshot.docs.forEach((doc) => {
        const document = doc.data();
        console.log(document);
        clientsList.push(document);
      });
    });
    console.log(clientsList);
    const clientArray = { clients: clientsList };
    fetchClients(clientArray);
  };
  useEffect(clientData, []);

  return (
    <div>
      <HeaderAdmin />
      <Clients />
    </div>
  );
};
const mapDispatchToProps = (dispatch) => ({
  fetchClients: (clientList) => dispatch(fetchClients(clientList))
});
export default connect(null, mapDispatchToProps)(Admin);

enter image description here[![enter image description here][2]][2]I am using redux to create an array. But it is not working in the map function. but if I console.log that created array and copy it from the console, And then assign that copied array to another constant, It works. Why it is not working dynamically. I am adding a picture of my console, The first one is a static array(the one that I copied and pasted to my code). The second one is a dynamically created array. What's the difference, If I copy them and paste them to notepad, Both of them look exactly the same but the [![

import "./clients.css";
import { ClientBar } from "./client-bar";
import { connect } from "react-redux";

const Clients = ({ fetchClients }) => {
  const cs = [
    {
      clientEmail: "john@unknown.com",
      clientMessage:
        "hello my name is john wickhello my name is john wickhello my name is john wickhello my name is john wick",
      clientSubject: "unknown",
      clientName: "john"
    },
    {
      clientEmail: "client@gmail.com",
      clientMessage:
        "Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis dolorum dolorem soluta quidem expedita aperiam aliquid at. Totam magni ipsum suscipit amet? ",
      clientSubject: "client",
      clientName: "client"
    }
    ///I copied this cs from output of my clintsss array
  ];
  console.log(cs);
  const clintsss = fetchClients.clients;
  console.log(clintsss);
  return (
    <div className="about">
      <div className="box">
        <div className="box-1">
          <h1>Clients</h1>
          <div className="clients-box">
             {clintsss.map((data) => (
              <div>{data.clientName}</div>
            ))} 
          </div>
        </div>
      </div>
    </div>
  );
};

const mapStateToProps = (state) => ({
  fetchClients: state.fetchClients.clientsList
});

export default connect(mapStateToProps)(Clients);

]3]3dynamically generated Array does not work in the map function.

redux reactjs map-function arrays javascript
2 Answers

Congrats! you figured out exactly what was wrong! but I'd suggest you to not use setTimeout as a method to wait for the data to be fetched. Why? an async operation can take a variable amount of time depending on multiple factors, for example: what happens if an user has a slow internet connection and it takes longer than you timeout to fetch the data? or, if the user has a fast internet connection and fetches the data faster than your timeout you make them wait longer.

This is a good article on fetching data with hooks, I'd advise you to read it! in a nutshell you need to do something like this (this is just a sample, you will need to adjust the code) :

const [clients, setClients] = useState([]);

useEffect(() => {
    async function fetchData() {
      const clients = await functionToFetchClients();
      setClients(result.clientsList);
    }

    fetchData();
  }, []);
user_23301450

I figured it out, Actually, I am not giving my fetchClients enough time to fetch the data, I just used it to render it immediately. So I needed to find any solution to give it enough time to fetch. For now, I just gave a set timeout function.

user_139520310
Related