Del componente Padre le paso al componente hijo un array de objetos atraves de props. Cuando el componente hijo recibe la data del props, quiero guardardarla en el useSate. De la forma que lo hice no me muestra errores, pero cuando intento hacer el map para recorrer los datos del useState, no muestra nada. Funciona si directamente hago props.operations.map para mostrar los datos en la tabla, lo que pasa es que mas adelante voy a necesitar manipular el estado, por eso decidí utilizar useState.
Componente Padre
const [stateOperations, setStateOperations] = React.useState([]);
React.useEffect(() => {
getOperations('ingreso');
}, []);
const getOperations = async (type) => {
const data = await fetch(
`http://localhost:4000/api/operations/filter/clau@gmail.com/${type}`
);
const operationsData = await data.json();
console.log(operationsData);
setStateOperations(operationsData);
};
return(
<OperationsList operations={stateOperations} />
);
Componente hijo OperationsList
const OperationsList = (props) => {
// cargando la data del props en el useState
const[stateOperations, setStateOperations] = React.useState(props.operations)
let cont = 1;
return(
<Table striped bordered hover size="sm">
<thead>
<tr>
<th>Fecha</th>
<th>Concepto</th>
<th>Monto</th>
<th>Tipo</th>
<th>Categoria</th>
<th></th>
</tr>
</thead>
<tbody>
{stateOperations.map((item) => (
<tr key={cont++}>
<td>
{moment(item.registration_date)
.subtract(10, "days")
.calendar()}
</td>
<td>{item.concept}</td>
<td>{item.amount}</td>
<td>{item.type}</td>
<td>{item.category}</td>
<div className="text-center">
<button className="btn btn-primary">
<FontAwesomeIcon icon={faEdit} />
</button>
<button className="btn btn-danger">
<FontAwesomeIcon icon={faTrash} />
</button>
</div>
</tr>
))}
</tbody>
</Table>
);
};