estoy realizando un .filter a un objeto para filtrarlo por las fechas, luego le hago un map para acceder al resultado y poder llenar mi state "datosPorCopiar" pero al realizar la acción solo me completa el ultimo elemento recorrido, que puede estar pasando?.
Lo que necesito es que todos los datos mapeados se guarden el el estado datosPorCopiar, si falta alguna información o necesitan alguna foto o algun resultado, por favor comentarme para editar el post con la informacion que necesiten, muchas gracias!
Aca dejo mi codigo ( es dentro de la funcion copiarDatos)
import React, { useState } from "react";
import { Link } from "react-router-dom";
const TableConsolidado = ({ confirmDelete, data, names, anio, mes }) => {
const [datosPorCopiar, setDatosPorCopiar] = useState([]);
const copiarDatos = () => {
const meses = [
"diciembre",
"enero",
"febrero",
"marzo",
"abril",
"mayo",
"junio",
"julio",
"agosto",
"septiembre",
"octubre",
"noviembre",
];
let mesAnterior;
let anioNuevo = anio;
if (mes === "diciembre") {
// si el caso es diciembre, entonces el anterior es noviembre.
mesAnterior = "noviembre";
} else {
// en cualquier otro caso, el mes anterior es el que se encuentra una posición antes en el arreglo de meses.
const indiceMesActual = meses.indexOf(mes);
mesAnterior = meses[indiceMesActual - 1];
}
console.log("el mes anterior es: " + mesAnterior);
console.log("año actual es : " + anio);
if (mesAnterior === "diciembre") {
anioNuevo = anio - 1;
console.log("anio nuevo restado es:" + anioNuevo);
}
data
.filter((dat) => dat.mes === mesAnterior && dat.anio === anioNuevo)
.map((dat) => (
setDatosPorCopiar([...datosPorCopiar, dat])
)); // guarda los datos filtrados en el state datosPorCopiar
};
return (
<>
<hr />
<div className="container">
<div className="row">
<div className="col">
<div className="d-grid gap-2">
<Link
to="/createconsolidado"
state={{ names: names, anio: anio, mes: mes }}
className="btn btn-secondary mt-2 mb-2"
>
CREATE
</Link>
</div>
<table className="table table-dark table-hover">
<thead>
<tr>
<th>CUARTO</th>
<th>DNI</th>
<th>NOMBRES</th>
<th>APELLIDOS</th>
<th>TELEFONO</th>
<th>PRECIO</th>
<th>MONTO PAGADO</th>
<th>NOTAS</th>
<th>ACCION</th>
</tr>
</thead>
<tbody>
{data
.filter((dat) => dat.mes === mes && dat.anio === anio)
.map((dat) => (
<tr key={dat.id}>
<td>{dat.roomName}</td>
<td>{dat.dni}</td>
<td>{dat.name}</td>
<td>{dat.lastName}</td>
<td>{dat.phone}</td>
<td>{dat.price}</td>
<td>{dat.montoPagado}</td>
<td>{dat.notas}</td>
<td>
<Link
to={`/edit/${dat.id}`}
state={{ names: names }}
className="btn btn-light"
>
<i className="fa-solid fa-pencil"></i>
</Link>
<button
onClick={() => {
confirmDelete(dat.id);
}}
className="btn btn-danger"
>
<i className="fa-solid fa-trash"></i>
</button>
</td>
</tr>
))}
</tbody>
</table>
<button onClick={() => copiarDatos()}>Test</button>
</div>
</div>
</div>
</>
);
};
export default TableConsolidado;
setDatosPorCopiar([...datosPorCopiar, dat])
. Una pregunta: Qué crees que hace esa línea de código?