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

CodePudding user response：

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 !!

CodePudding user response：

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

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