How can I iterate over an array objet in ReactJs?-CodePudding

I'm trying to render data from an API over a table with the function .map, I've done it before but I just don't know why it is not working this time, I've tried different ways but still it is not been rendered.

This is my code:

 import React, { useContext } from 'react'
 import { useEffect } from 'react';
 import Table from 'react-bootstrap/Table';
 import { CdrsContext } from '../contexts/CDRDownloadingContext';
 import { UserContext } from '../contexts/UserContext';
 import UseAuth from '../hooks/UseAuth';
 import styles from './stylePages/CDRDownloading.module.css'

const CDRTable = () => {

const { cdrListFiltered, getCdrsListMadeByUser } = useContext(CdrsContext);
const { getUserDetails, record } = useContext(UserContext)

/*************************************
* GETTING DETAILS FROM USER
//*************************************/
const { auth } = UseAuth();
// auth personalized hook is called to get the username's user 
// which will be the parameter to get the complete user details
const extractedUsername = auth.username;

// variable to store the user's logged in specific ID. 
const extractedUserById = record.serie;
console.log(extractedUserById)
//**************************************/

// Function to mount the list the specific logged in user's information and get the 
//reportes they have made by passing the Id of the user. 
useEffect(() => {
    getUserDetails(extractedUsername);
    getCdrsListMadeByUser(extractedUserById)
}, []);

console.log(cdrListFiltered);
// console.log(cdrListFiltered[0])
return (
    <>
        <div>
            <br />
        </div>
        <Table className={styles.table}>
            <thead className={styles.tableHead}>
                <tr>
                    <th>ID</th>
                    <th>FECHA CONSULTA</th>
                    <th>ID USUARIO</th>
                    <th>EMAIL</th>
                    <th>FECHA INICIAL</th>
                    <th>FECHA FINAL</th>
                    <th>TIPO REPORTE</th>
                    <th>NOMBRE CLIENTE/PROVEEDOR</th>
                    <th>RGIDs</th>
                    <th>ESTADO</th>
                    <th>PROCESO INICIADO</th>
                    <th>PROCESO FINALIZADO</th>
                    <th>FILTRO LLAMADA</th>
                </tr>
            </thead>
            <tbody>
                {cdrListFiltered?.data?.map((report) => (
                    <tr key={report.map.id} >
                        <td>{report.map.requestDate}</td>
                        <td>{report.data.map.requestDate}</td>
                        <td>{cdrListFiltered[report.map.requestDate]}</td>
                    </tr>
                ))}
            </tbody>
        </Table>
    </>
)
}

export default CDRTable

I'm displaying the data information on the console to see how can I iterate it, but still I cannot figure out where I'm failing. I attach a screenshot of the output on the consol.

Console's output data

I would appreciate your help guys! Thank you.

CodePudding user response：

you should return it then it will work Try Below Code Let me know if it works

{cdrListFiltered?.data?.map((report, reportIndex) => { return ( {report.map.requestDate} {report.data.map.requestDate} {cdrListFiltered[report.map.requestDate]} })}

CodePudding user response：

I found out that the reason why it was not going through was because I was iterating an array not an object, so it was not necessary to type it as: cdrListFiltered?.data?.map(), but only cdrListFiltered?.map() to map the array.

This article helped me to find out that reason:

https://bobbyhadz.com/blog/react-loop-through-array-of-objects#:~:text=To loop through an array,of the passed in function.