React Js - Uncaught TypeError: Cannot read properties of undefined

Question

I have a data grid in reactJS that i need to populate with data taken by merging data from three tables. The first contains the indexes and the other two are the elements to be displayed. below is the code to populate the grid lines

const datiRighe = vocibilancio.map(voci => {
    const lista = listaattivita.find(elemento => elemento.id_lista_attivita === 
    voci.id_gruppo_att)
    const listasub = listasubattivita.find(elementosub => 
    elementosub.id_lista_sub_group === voci.id_sub_group_att)
    console.log("lista:", lista);
    console.log("listasub:", listasub);
    console.log("voci: ", voci);
    return {
        id: voci.id_voce_bilancio,
        idGruppoAtt: lista.denominazione,
        idSubGroupAtt: listasub.denominazione_sub,
        descrizioneVoceBilancio: voci.descrizione_voce_bilancio,
        totaleVoceBilancio: voci.totale_voce_bilancio,
        createdAt: voci.createdAt,
        updatedAt: voci.updatedAt,
    };
}, []);

in the three console.log I get the data I expect but for some reason lista.denominazione and listasub.denominazione_sub are not accessible.

This is the console.log of lista for example:

{
    "id_lista_attivita": 1,
    "denominazione": "Uscite da attività di interesse generale",
    "tipo": 0,
    "createdAt": "2022-04-12",
    "updatedAt": "2022-04-12"
}

this is the error I receive:

Uncaught TypeError: Cannot read properties of undefined (reading 'denominazione')

I don't understand where I'm wrong. I ask you for help, thank you!

Answer 1

These values are undefined:

const lista = listaattivita.find(elemento =>
  elemento.id_lista_attivita === voci.id_gruppo_att);
const listasub = listasubattivita.find(elementosub => 
  elementosub.id_lista_sub_group === voci.id_sub_group_att);

This happens when no matching values are found. So the question becomes, how do you want to handle the case when these are undefined?

For example, you can use nullish-checking when returning the result:

return {
    id: voci.id_voce_bilancio,
    idGruppoAtt: lista?.denominazione, // <--- here
    idSubGroupAtt: listasub?.denominazione_sub, // <--- and here
    descrizioneVoceBilancio: voci.descrizione_voce_bilancio,
    totaleVoceBilancio: voci.totale_voce_bilancio,
    createdAt: voci.createdAt,
    updatedAt: voci.updatedAt,
};

That would result in the properties idGruppoAtt and idSubGroupAtt being null in the returned result. Which may require you to handle null values elsewhere in your code as well.

Or maybe you want to return some default values, or throw an error, or something else. It's up to you. The point is that .find() might return undefined if the value is not found, so you just need to handle that scenario.

Answer 2

I solved. The problem for me was the order in which I execute the GETs from the Database in ReactJs. First the individual lists and then all the rest of the data.

Like This:

const [vocibilancio, setVocebilancio] = useState([])
useEffect(() => {
    getListaAttivita() // FETCH list one
    getListaSubAttivita() //FETCH list two
    getVociBilancio() // FETCH rest of data
}, [])