Problem with component bound to an api with axios in React Native not rendering

Question

I'm for the first time trying to consume an api with axios in react native.

My goal is to demonstrate the name of the state on the screen, from this api ( https://servicodados.ibge.gov.br/api/v1/localidades/estados/ ), however, when I map it with only a {date.name}, but the content is not displayed.

What would I be doing wrong?

 import React, { useEffect, useState } from "react"; import { Icon } from "react-native-elements"; import { View, TextInput, ScrollView, FlatList, Text } from "react-native"; import { Container, SearchInput, SearchInputText } from "./styles"; import Header from "../../components/Header"; import DashedCircle from "../../components/DashedCircle"; import axios from "axios"; export default (props) => { const [data, setData] = useState([]); useEffect(() => { async function fetchData() { const response = await axios.get( "https://servicodados.ibge.gov.br/api/v1/localidades/estados/" ); setData(response.data); } fetchData(); }, []); console.log(data); return ( <> <DashedCircle /> <Container> <Header onPress={() => props.navigation.goBack()} /> <SearchInput> <SearchInputText placeholder="Buscar estado" /> <Icon name="search-outline" type="ionicon" color="#c4c4c4" style={{ paddingHorizontal: 15, paddingVertical: 15, }} /> </SearchInput> {data.map((item) => { <Text>{data.nome}</Text>; })} </Container> </> ); };

app image

Answer 1

Hi You are doing one mistake , which using {} , we have to return and also instead of data we are using item to access the data like this :

{data.map((item) => {
      return(
      <Text>{item.nome}</Text>
       );
    })}

But if you don't want to use return use :

 {data.map((item) => (
          <Text>{item.nome}</Text>;
        ))}

Happy Coding !!

Answer 2

You are mapping data so call the name from item , try:

{data.map((item) => {
    <Text>{item.nome}</Text>
})}