I'm trying to validate two conditions within the function .find() as I'm able to do only one succesfully, this <td>{contactNames?.find(data =>{return data.contact_id_customer === report.contactIdCustomer})?.nombre}</td> is working perfect, it is giving the name of the customers instead of the customer id from the database, however, I need to do the same validation with contact_id_providers but we don't want to render it in a different column from the table but in the customer's column one as well, so we can only leave the name as name on that column.
This is the Array object contactsName list that I'm bringing from the context provider, im not able to past images.
Array(28)0:contact_id_customer: 0contact_id_provider: 0nombre: nullpnombre: null[[Prototype]]: Object12: {contact_id_provider: 0, nombre: '464 IN-CO TELMEX G1', pnombre: null, contact_id_customer: 223}13: {contact_id_customer: 0, contact_id_provider: 5, nombre: null, pnombre: 'ARIATEL CORP'}14: {nombre: 'AGENTES MARCA 00464', contact_id_provider: 0, pnombre: null, contact_id_customer: 74}15: {contact_id_customer: 0, contact_id_provider: 2, pnombre: 'A&D MONTANA CORP', nombre: null}16: {contact_id_customer: 0, contact_id_provider: 5, nombre: null, pnombre: 'ARIATEL CORP'}17: {contact_id_customer: 0, pnombre: 'ATLANTEL INC', contact_id_provider: 6, nombre: null}18: {contact_id_provider: 67, contact_id_customer: 0, pnombre: 'ITX ETB TPBCL', nombre: null}19: {contact_id_provider: 0, pnombre: null, nombre: 'ADRIA-DMS Telecom LLC', contact_id_customer: 303}20: {contact_id_customer: 18, contact_id_provider: 0, pnombre: null, nombre: 'VARSATEL CORPORATION'}21: {nombre: 'AIRTIME TECHNOLOGIES', contact_id_provider: 0, contact_id_customer: 294, pnombre: null}22: {contact_id_customer: 0, contact_id_provider: 0, pnombre: null, nombre: null}23: {contact_id_customer: 0, contact_id_provider: 0, pnombre: null, nombre: null}24: {contact_id_customer: 0, contact_id_provider: 0, pnombre: null, nombre: null}25: {contact_id_customer: 0, contact_id_provider: 0, pnombre: null, nombre: null}26: {contact_id_provider: 0, nombre: 'XXXXX Videocon Carrier Services Limited', pnombre: null, contact_id_customer: 190}27: {contact_id_provider: 0, pnombre: null, contact_id_customer: 138, nombre: 'VASUDEV GLOBAL LTD'}length: 28[[Prototype]]: Array(0)
I have tried this way: {contactNames?.find(data =>{return data.contact_id_customer && data.contact_id_provider === report.contactIdCustomer && report.contactIdProvider})?.nombre} But it is only returning only the names of the provider.
Here is my code from the component CDRTable:
import React, { useContext, useState } from 'react'
import { useEffect } from 'react';
import { Button, Modal } from 'react-bootstrap';
import Table from 'react-bootstrap/Table';
import { CdrsContext } from '../../contexts/CDRDownloadingContext';
import { CustomerContext } from '../../contexts/CustomerContext';
import { ProviderContext } from '../../contexts/ProviderContext';
import { UserContext } from '../../contexts/UserContext';
import UseAuth from '../../hooks/UseAuth';
import styles from '../stylePages/CDRDownloading.module.css'
const CDRTable = () => {
const { getUserDetails, record } = useContext(UserContext)
const { cdrListFiltered, getCdrsListMadeByUser, deleteCdr, getContactNames, contactNames } = useContext(CdrsContext);
const { auth } = UseAuth();
/*************************************
* GETTING THE USER ID TO GET THE LIST OF REPORT REQUESTS SENT BY THE SPECIFIC USER
//*************************************/
// Auth.username is providing an object type user from the backend, which among the properties it contains the user id.
const extractedUsername = auth.username;
// Once the user details have been loaded with the getUserDetails(extractedUsername); function which expects a username to get data.
// I get the especific user and with the record
const extractedUserById = record.serie;
//**************************************/
/**
* Function to mount the list of report requests made by the logged in user
*/
useEffect(() => {
getUserDetails(extractedUsername);
if (extractedUserById !== undefined) {
getCdrsListMadeByUser(extractedUserById)
}
}, [extractedUserById]);
const typeReport = {
0: 'Cliente',
1: 'Proveedor'
}
const callFilter = {
0: 'Contestadas',
1: 'No contestadas',
2: 'Todas'
}
const statusStage = {
0: 'Recibido',
1: 'En proceso',
2: 'Finalizado'
}
useEffect(() => {
getContactNames();
}, [])
return (
<>
<div>
<br />
</div>
<Table className={styles.table}>
<thead className={styles.tableHead}>
<tr>
<th>ID</th>
<th>SOLICITADO</th>
<th>DESDE</th>
<th>HASTA</th>
<th>TIPO</th>
<th>Nombre cliente</th>
<th>Nombre proveedor</th>
<th>NOMBRE</th> // Here is where I'm trying to get the name in this column
<th>RGIDs</th>
<th>FILTRO</th>
<th>ESTADO</th>
<th>PROCESO INICIADO</th>
<th>PROCESO FINALIZADO</th>
<th>OPCIONES</th>
</tr>
</thead>
<tbody>
{cdrListFiltered?.map((report, reportIndex) => (
<tr key={reportIndex} >
<td>{reportIndex 1}</td>
<td>{report.requestDate}</td>
<td>{report.startDate}</td>
<td>{report.endDate}</td>
<td>{typeReport[report.reportType]}</td>
<td>{report.contactIdCustomer}</td>
<td>{report.contactIdProvider}</td>
<td>{contactNames?.find(data =>{return data.contact_id_customer === report.contactIdCustomer})?.nombre}</td>
<td>{contactNames?.find(data =>{return data.contact_id_provider === report.contactIdProvider})?.pnombre}</td>
<td>{report.rgids}</td>
<td>{callFilter[report.callQuery]}</td>
<td>{statusStage[report.status]}</td>
<td>{report.processStart}</td>
<td>{report.processFinish}</td>
<td className={styles.buttonOptions}>
<Button
variant='primary'
className={styles.btnGuardar}
>
<span className={styles.textButton}>Descargar</span>
</Button>
<Button
variant='danger'
className={styles.btnEliminar}
onClick={() => handleClickDelete(report.id)}
>
<span className={styles.textButton}>Eliminar</span>
</Button>
</td>
</tr>
)
)}
</tbody>
</Table>
</>
)
}
export default CDRTable
I'm a little stuck here, so I was wondering if anyone knows how to handle this type of case?
CodePudding user response：
It sounds like you just want to concatenate the two strings?
<td>
{contactNames?.find(
(data) => data.contact_id_customer === report.contactIdCustomer
)?.nombre
' '
contactNames?.find(
(data) => data.contact_id_provider === report.contactIdProvider
)?.pnombre}
</td>
CodePudding user response：
I'm having trouble understanding your question, but could this solve your problem.
{contactNames?
.find(data =>
data.contact_id_customer === report.contactIdCustomer ||
data.contact_id_provider === report.contactIdProvider)
?.[contactNames?.find(data =>
data.contact_id_customer === report.contactIdCustomer ||
data.contact_id_provider === report.contactIdProvider)
?.nombre ? 'nombre' : 'pnombre']
}
Also this looks horrible and should probably be extracted into function.
const getName = (arr, rep) => {
const t = arr?.find(data =>
data.contact_id_customer === rep.contactIdCustomer ||
data.contact_id_provider === rep.contactIdProvider
)
return `${t?.nombre ?? ''} ${t?.pnombre ?? ''}`
}