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

user_19409935 0
Viewed 18

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

axios react-native reactjs android javascript
2 Answers

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

user_184315700

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

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