Como acessar um objeto dentro de outro objeto de um arquivo JSON no react-native com flatList

{ "id": 1, "usuario": "Turí Souza", "fotoPost": "https://litoralguia.com.br/wordpress/wp-content/files/litoralguia.com.br/2021/12/imagem1.png", "fotoUsuario": "https://github.com/turisouza.png", "legenda": "Conheça as melhores ondas do Brasil", "likes": 230, "comentarios": [ { "usuario": "fernanda", "texto": "Eu quero!" }, { "usuario": "luisalberto", "texto": "Já surfei ai" }, { "usuario": "marcosmonteiro", "texto": "Meu lar" } ]

<FlatList keyExtractor={item => String(item.id)} data={fotos} renderItem={({item}) => ( <View> <View style={estilos.perfil}> <Image source={{uri: item.fotoUsuario}} style={estilos.imagemPerfil} /> {console.log(item.fotoUsuario)} <Text style={estilos.nomeDeUsuario}>{item.usuario}</Text> </View> <Image source={{uri: item.fotoPost}} style={estilos.imagemPostagem} /> {console.log(item.fotoPost)} <Rodape curtidas={item.likes} legenda={item.legenda} usuario={item.usuario} comentariosTexto={item.comentarios.texto} comentariosUsuario={item.comentarios.usuario} /> </View> )} />

Buscando aqui o ChatGpt me deu um caminho, não era exatamente o que eu queria, mas já tinha pensado nisso. Abri uma outra FlatList dentro da que já estava.

Segue a resposta dele:

Parece que você está enfrentando um problema ao acessar as propriedades dos comentários dentro do objeto JSON. O problema reside na forma como você está tentando acessar essas propriedades dentro da sua FlatList.

Dentro do renderItem da FlatList, você precisa iterar sobre os comentários de cada foto para renderizá-los corretamente. Você pode fazer isso usando outra FlatList ou um componente similar para renderizar os comentários dentro de cada item da lista.

Aqui está uma abordagem corrigida para acessar os comentários:

<FlatList
  keyExtractor={item => String(item.id)}
  data={fotos}
  renderItem={({item}) => (
    <View>
      <View style={estilos.perfil}>
        <Image
          source={{uri: item.fotoUsuario}}
          style={estilos.imagemPerfil}
        />
        <Text style={estilos.nomeDeUsuario}>{item.usuario}</Text>
      </View>

      <Image source={{uri: item.fotoPost}} style={estilos.imagemPostagem} />

      {/* Renderizar os comentários dentro de cada item */}
      <FlatList
        keyExtractor={(item, index) => index.toString()}
        data={item.comentarios}
        renderItem={({item: comentario}) => (
          <View>
            <Text style={estilos.comentarioUsuario}>{comentario.usuario}</Text>
            <Text style={estilos.comentarioTexto}>{comentario.texto}</Text>
          </View>
        )}
      />

      <Rodape
        curtidas={item.likes}
        legenda={item.legenda}
        usuario={item.usuario}
      />
    </View>
  )}
/>

Com essa abordagem, a FlatList interna é usada para renderizar os comentários dentro de cada item da lista principal. Assim, você poderá acessar corretamente as propriedades de usuário e texto de cada comentário. Certifique-se de ajustar os estilos e outras propriedades conforme necessário.