Desafio Alura, Flat List | Mobile

Fala, Fernando! Tudo certo ?

Então, geralmente esse erro ocorre quando tentamos renderizar diretamente um array ou um objeto em nosso código** JSX. Do jeito que o código está atualmente, o componente **Lista está recebendo um objeto inteiro e tentando mostrar esse componente dentro do return, o React não tem como dizer o que renderizar quando fornecido com um objeto, portanto, o erro Invariant Violation aparece ao tentar. Mas isso é bem fácil de corrigir, quando você define o que o componente lista vai receber em Lista(nome, link) você já pode desconstruir esse objeto colocando chaves dentro da lista, da seguinte forma Lista({nome, link}). Fazendo essa pequena correção, deve voltar a funcionar corretamente. Logo, o código ficará da seguinte forma:

Componente Lista.js

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

export default function Lista({nome, link}) {
    return (
        <>
            <Text>{nome}</Text>
            <Text>{link}</Text>
        </>
    )
}

Flatlist

const texto = {
  lista : [
    {id: 1, nome: 'João', link:"aa"},
    {id: 2, nome: 'Maria', link:"bb"},
    {id: 3, nome: 'José', link:"cc"},
    {id: 4, nome: 'Pedro', link:"dd"},
    {id: 5, nome: 'Ana', link:"ee"},
    ]
  }

const TopoLista = () => {
  return (
    <>
      <Text>Titulo dos Produtores</Text>
    </>
  )
}



export default function App() {
  return (
    <FlatList
      data={texto.lista}
      keyExtractor={item => item.id}  
      renderItem={({item}) => <Lista {...item} /> }
      ListHeaderComponent={TopoLista}
    />
  );
}

Eu espero que tenha ajudado e qualquer coisa estou por aqui.

Abraço

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!