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>
</>
);
};You are mapping data so call the name from item, try:
{data.map((item) => {
<Text>{item.nome}</Text>
})}