Tengo una tabla en JSX y quiero cargar una columna de manera dinamica pero no lo la muestra, se queda en blanco. Primero obtengo datos desde una api y los paso a un array, luego de todo el JSON obtenido paso los campos fecha y los paso a un array, y luego de ese mismo array elimino los repetidos, al parecer se agregan bien pero no muestra el resultado en la tabla.
Ejemplo de mi json
[
{
"codigo": 260,
"nombre": "DANIEL H",
"campo": 4,
"cultivo": T1
"mes": "Octubre",
"fecha": "2021-10-25"
},
{
"codigo": 123,
"nombre": "JOSE LUIS",
"campo": 1,
"cultivo": T1
"mes": "Octubre",
"fecha": "2021-10-25"
},
{
"codigo": 99,
"nombre": "ANGEL",
"campo": 1,
"cultivo": T1
"mes": "Octubre",
"fecha": "2021-10-25"
},
{
"codigo": 8,
"nombre": "VIRIDIANA",
"campo": 1,
"cultivo": T1
"mes": "Octubre",
"fecha": "2021-10-25"
},
{
"codigo": 260,
"nombre": "DANIEL H",
"campo": 4,
"cultivo": "ZARZAMORA"
"mes": "Octubre",
"fecha": "2021-10-25"
}
]
Como ven la fecha se repite y quiero que como tal 2021-10-25 sea el nombre de la columna, ya que eventualmente se añadiran mas fechas.
Aqui mi codigo:
import React, { useEffect, useState } from "react";
import Cookies from "universal-cookie";
import Contenedor from "../Contenedor.jsx";
import { makeStyles, Grid } from "@material-ui/core";
import { useDispatch, useSelector } from "react-redux";
import {
getListProyeccionAction
} from "../../redux/Proyeccion/ProyeccionD";
import '../../css/index.css'
const Proyeccion = () => {
const styles = useStyles();
const cookies = new Cookies();
const dispatch = useDispatch();
const proyeccion = useSelector((v) => v.proyeccion.arrayProyeccion);
var fechas = [];
const getData = () => {
dispatch(getListProyeccionAction(cookies.get("IdUser")));
//Obtengo un JSON y lleno un array llamado fechas con todos los valores fecha de mi json
for (const x of proyeccion) {
fechas.push({
fecha: x.fecha
});
}
//luego elimino las fechas duplicadas del mismo array
var hash = {};
fechas = fechas.filter(function (current) {
var exists = !hash[current.id];
hash[current.id] = true;
return exists;
});
console.log(fechas.length);
};
useEffect(() => {
getData();
}, []);
return (
<div className={styles.root}>
<Contenedor />
<div className={styles.content}>
<div className={styles.toolbar}></div>
<section className="content">
<div className="row">
{proyeccion.length > 0 ? (
<table
className="table table-hover"
style={{ fontSize: 11, textAlign: "center" }}
>
<thead className="thead-light">
<tr>
<th colspan={8}></th>
<th style={{ backgroundColor: "#B0C4DE" }} colspan={1}>Fechas de actualizaciones</th>
</tr>
<tr>
<th>Codigo</th>
<th>Nombre</th>
<th>Campo</th>
<th>Cultivo</th>
<th>Mes</th>
<th># Cambios</th>
<th>
{fechas.length > 0 ?
<>
{fechas.map((item) => (
<React.Fragment key={item.fecha}>
{item.fecha}
</React.Fragment>
))}
</>
:
null
}
</th>
</tr>
</thead>
<tbody style={{ backgroundColor: "white" }}>
{proyeccion.filter(searchData(search)).map((item) => (
<React.Fragment key={item.noMes}>
<tr>
<td>{item.codigo}</td>
<td>{item.nombre}</td>
// etc..
</tr>
</React.Fragment>
))}
</tbody>
</table>
) : (
<>
<div className="alert alert-danger" role="alert">
No hay datos
</div>
</>
)}
</div>
</div>
</>
)}
</section>
</div>
</div>
);
};
export default Proyeccion;
null
del operador ternario y pon un<p>test</p>
, para confirmar que llegan datos enfechas.map
, si despues de recargar sale test, entonces hay algún problema confechas.map