0

Estoy creando una tabla con los datos guardado en mi coleccion de firebase, cuando intento pintarlos en cada parte de la tabla me genera el siguiente error:

Uncaught TypeError: Cannot read properties of null (reading 'filas')

Este es mi codigo, no se que estoy haciendo mal:

import React, { useState, useEffect } from "react";
import { getLastDocumentOfTheCollection } from "../Firebase/firebase.config";

const GeneratedReport = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    getLastDocumentOfTheCollection(setData);
  }, []);
  return (
    <div className="container-ReportGenerated">
      <div className="table-wrapper">
        <table className="containerTable">
          <thead>
            <tr>
              <th>{data.filas.fila1.campo}</th>
              <th>{data.filas.fila2.campo}</th>
              {data?.columnas?.columna1?.data.map((columns, i) =>
                columns === "" ? <th key={i}></th> : <th key={i}>{columns}</th>
              )}
            </tr>
            <tr>
              {data?.filas?.fila1?.data.map((rows, i) => (
                <tr>{rows}</tr>
              ))}
            </tr>
          </thead>
        </table>
      </div>
    </div>
  );
};

export default GeneratedReport;

2 respuestas 2

0

const [data, setData] = useState(null); -> esto esta inicializando tu state data como null. En el primer render, data es null. Al momento de que React trata de hacer render a data.filas.fila1 es donde falla.

Tendrias que hacer algo como:

const GeneratedReport = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    getLastDocumentOfTheCollection(setData);
  }, []);

  if (!data) {
    return <></>;
    // o tambien:
    // return null;
    // return <>Cargando...</>;
  }

  return (
    <div className="container-ReportGenerated">
      <div className="table-wrapper">
        <table className="containerTable">
          <thead>
            <tr>
              <th>{data.filas.fila1.campo}</th>
              <th>{data.filas.fila2.campo}</th>
              {data?.columnas?.columna1?.data.map((columns, i) =>
                columns === "" ? <th key={i}></th> : <th key={i}>{columns}</th>
              )}
            </tr>
            <tr>
              {data?.filas?.fila1?.data.map((rows, i) => (
                <tr>{rows}</tr>
              ))}
            </tr>
          </thead>
        </table>
      </div>
    </div>
  );
};
0

Nunca setas tu 'data' y tiene un estado de Null por defecto por lo que al renderizarse tu componente intentara sacar el campo filas de Null en la parte

<th>{data.filas.fila1.campo}</th>
<th>{data.filas.fila2.campo}</th>

usa:

<th>{data?.filas.fila1.campo}</th>
<th>{data?.filas.fila2.campo}</th>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.