I want to ask some question and need solved a problem. So about couple weeks ago I start little project for study and trying use React Native for android called Pokemon because I'm still beginner. For now I can render all pokemon names. The problem is I can't render the image from API pokemon because the image in the name/id API and when I want get the image from API always get error request failed with status error code 404
import React, { useState, useEffect } from 'react';
import { StyleSheet, SafeAreaView, View, Text, Image, FlatList, ScrollView} from 'react-native';
import Axios from 'axios';
function PokemonTesting() {
const [pokeName, setpokeName] = React.useState();
const [images , setImages] = React.useState({
imag: ""
})
const [id, setId] = React.useState(1)
React.useEffect(() => {
Axios
.get(`https://pokeapi.co/api/v2/pokemon/`)
.then (res => {
console.log(res.data.results);
setpokeName(res.data.results)
})
.catch(err =>{
console.log(err);
})
}, [setpokeName])
const namepokemonid = () => {
<FlatList
data = {pokeName}
keyExtractor = {(item, index) => {
return index.toString()
}}
renderItem = {({ item }) => {
// console.log("item", item)
return(
<Text>{item.name}</Text>
)
}} />
}
React.useEffect(() => {
Axios
.get(`https://pokeapi.co/api/v2/pokemon/${namepokemonid}/`)
.then (res => {
console.log(res.data.species.name);
setImages({
imag: res.data.species.name
})
})
.catch(err =>{
console.log(err)
})
}, [setImages])
return (
<SafeAreaView>
<FlatList
data = {pokeName}
keyExtractor = {(item, index) => {
return index.toString()
}}
renderItem = {({ item }) => {
// console.log("item", item)
return(
<Text>{item.name}</Text>
)
}} />
<Image
style = {styles.pic}
source={{uri:images}} />
</SafeAreaView>
)
}
const styles = StyleSheet.create ({
item: {
padding : 10,
fontSize : 20,
height: 44
},
pic: {
width : 50,
height : 50
}
})
export default PokemonTesting
Thanks
