1
resposta

[Bug] Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: number. Check the render method of `Topo`.

/src/telas/Cesta/index.js

import React from 'react';
import { FlatList, StyleSheet, View } from 'react-native';

import Texto from '../../componentes/Texto';

import Topo from '../../componentes/Topo';
import useTextos from '../../hooks/useTextos';
import Detalhes from './componentes/Detalhes';
import Item from './componentes/Item';

export default function Cesta({ detalhes, itens, produtor }) {
  const { topoCesta, tituloItens } = useTextos();

  return <>
    <FlatList
      data={itens}
      renderItem={Item}
      keyExtractor={({ nome }) => nome }
      ListHeaderComponent={() => {
        return <>
          <Topo titulo={topoCesta} />
          <View style={estilos.cesta}>
            <Detalhes {...detalhes} produtor={produtor} />
            <Texto style={estilos.titulo}>{ tituloItens }</Texto>
          </View>
        </>
      }}
      style={estilos.lista}
    />
  </>
}

const estilos = StyleSheet.create({
  lista: {
    backgroundColor: '#ffffff',
  },
  titulo: {
    color: "#464646",
    fontWeight: "bold",
    marginTop: 32,
    marginBottom: 8,
    fontSize: 20,
    lineHeight: 32,
  },
  cesta: {
    paddingVertical: 8,
    paddingHorizontal: 16,
  },
});

/src/componentes/Topo.js

import React from 'react';
import { Image, StyleSheet, Dimensions, TouchableOpacity } from 'react-native';

import Texto from './Texto';

import Gradiente from '../assets/gradiente.svg';
import topo from '../assets/topo.png';
import VoltarSVG from '../assets/voltar.svg';

const largura = Dimensions.get('screen').width;
const ALTURA_PADRAO = 270;

export default function Topo({ titulo, imagem = topo, altura = ALTURA_PADRAO }) {
  const estilos = funcaoEstilos(altura);
  return <>
    <Image source={imagem} style={estilos.topo} />
    <Gradiente width={largura} height={130 / 360 * largura} style={estilos.gradiente}/>
    <Texto style={estilos.titulo}>{ titulo }</Texto>
    <TouchableOpacity 
      onPress={() => {}}
      style={estilos.botaoVoltar}>
      <VoltarSVG color='white' style={estilos.voltar} />
    </TouchableOpacity>
  </>
}

const funcaoEstilos = (altura) => StyleSheet.create({
  topo: {
    width: "100%",
    height: altura,
  },
  gradiente: {
    position: 'absolute',
  },
  titulo: {
    width: "100%",
    position: "absolute",
    textAlign: "center",
    fontSize: 16,
    lineHeight: 26,
    color: "white",
    fontWeight: "bold",
    padding: 16,
  },
  botaoVoltar: {
    position: 'absolute',
    padding: 17,
  },
  voltar: {
    width: 24,
    height: 24,
  },
});

Erro:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: number. Check the render method of Topo.

1 resposta

Olá, Caique.

Tudo bem?

Esse erro geralmente ocorre quando você tenta renderizar um componente que não é válido. No seu caso, o erro está indicando que o React esperava uma string (para componentes integrados) ou uma classe/função (para componentes compostos), mas recebeu um número.

Analisando seu código, percebo que o problema pode estar na linha onde você tenta renderizar o componente Item na FlatList:

renderItem={Item}

A propriedade renderItem espera uma função que retorna um elemento React, mas no seu caso, você está passando o componente Item diretamente. Tente alterar essa linha para:

renderItem={({ item }) => <Item {...item} />}

Isso irá passar cada item do seu conjunto de dados para o componente Item como props.

Além disso, certifique-se de que o componente Item está exportado corretamente e que não está retornando um número em algum lugar.

Espero ter ajudado. Qualquer dúvida manda aqui. Bons estudos!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software