Não consigo renderizar elementos dinamicamente usando forEach

Question

Gostaria de saber se tem como renderizar o componente Drawer.Screen dentro de Drawer.Navigator, de forma dinâmica. Tentei fazer colocando os componentes em um array (materias/index.js) e percorre-los com .forEach(), como mostrado em Routes/index.js. Porém, ao clicar em qualquer uma das páginas, gera o seguinte erro:

"The action 'NAVIGATE' with payload {"name":"Matematica"} was not handled by any navigator."

Ou seja, não renderizou.

Materias/index.js:

import Matematica from '~/pages/materias/Matematica';
import Portugues from '~/pages/materias/Portugues';
import Fisica from '~/pages/materias/Fisica';

export default function Materias() {
  return [
    { name: 'Matematica', component: Matematica },
    { name: 'Portugues', component: Portugues },
    { name: 'Fisica', component: Fisica },
  ];
}

Routes/index.js:

import React from 'react';
import { createDrawerNavigator } from '@react-navigation/drawer';
import HomePage from '~/pages/HomePage';
import Materias from '~/pages/materias'

const Drawer = createDrawerNavigator();

function DrawerNavigation({ navigation }) { 

    const materias = Materias();

    return (
        <Drawer.Navigator
          initialRouteName="HomePage"
          drawerContent={() => ...}
        >
        
        <Drawer.Screen
          name="HomePage"
          component={HomePage}
          options={...}
        />
        
        {/* Lugar que gera o erro */}
        {materias.forEach((element) => (
          <Drawer.Screen
            name={element.name}
            component={element.component}
            options={...}
          />
        ))}

        </Drawer.Navigator>
    )
}

javascript react react native react navigation

Rafael Tavares · Accepted Answer

.forEach() vs .map()
Quando desejar exibir algum tipo de lista num componente em React, use o Array.map(), pois além da função desejada ser executada, é retornado um resultado para cada elemento do Array. O Array.forEach() apenas executa a função e não retorna um valor.


const arr = ['a', 'b', 'c'];

console.log('Retorno do .forEach():',  arr.forEach(el => el));
console.log('Retorno do .map():',  arr.map(el => el));

Renderizando listas no React
Sendo ainda mais específico, os componentes retornados dentro do .map() devem possuir uma key. Veja na documentação Listas e Chaves.

As chaves ajudam o React a identificar quais itens sofreram alterações, foram adicionados ou removidos. As chaves devem ser atribuídas aos elementos dentro do array para dar uma identidade estável aos elementos.

O código poderia ficar assim:
{materias.forEach((element) => (
  <Drawer.Screen
    key={element.name} {/* Identificador */}
    name={element.name}
    component={element.component}
    options={...}
  />
))}

Não consigo renderizar elementos dinamicamente usando forEach

One Answer

`.forEach()` vs `.map()`

Renderizando listas no React

Add your own answers!

Ask a Question