Hello everyone i have a problem with my FlatList here is the code :
i don't know where the problem comes from
import React, { Component } from 'react'
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import {View, Text, FlatList} from 'react-native';
import {
Avatar,
Button,
Card,
Title,
Paragraph,
List,
Headline,
} from 'react-native-paper';
export default class Home extends React.Component{
constructor(props) {
super(props);
this.state = {
posts: []
};
}
componentDidMount() {
this.fetchLastestPost();
}
async fetchLastestPost() {
const response = await fetch(
'https://kriss.io/wp-json/wp/v2/posts?per_page=5'
);
const posts = await response.json();
this.setState({posts});
}
render() {
return (
<List>
<Headline style={{ marginLeft: 30 }}>Lastest Post</Headline>
<FlatList
data={this.state.posts}
renderItem={({ item }) => (
<Card
style={{
shadowOffset: { width: 5, height: 5 },
width: '90%',
borderRadius: 12,
alignSelf: 'center',
marginBottom: 10,
}}>
<Card.Content>
<Title>{item.title.rendered}</Title>
</Card.Content>
<Card.Cover
source={{ uri: item.jetpack_featured_media_url }}
/>
</Card>
)}
keyExtractor={item,index => index.toString()}
/>
</List>
)
}
}
my goal is to display posts from a wordpress blog to my home page in a card component but I keep getting this error : ReferenceError: Can't find variable: item
Thanks for your help :)
You are getting that error because of this line
keyExtractor={item,index => index.toString()}
change it to
keyExtractor={(item,index) => index.toString()}
And the other thing is you are using List wrong way, and as you are using FlatList no need to use List here instead of list use View.
<View>
<Headline style={{ marginLeft: 30 }}>Lastest Post</Headline>
<FlatList
data={this.state.posts}
renderItem={({ item }) => (
<Card
style={{
shadowOffset: { width: 5, height: 5 },
width: '90%',
borderRadius: 12,
alignSelf: 'center',
marginBottom: 10,
}}>
<Card.Content>
<Title>{item.title.rendered}</Title>
</Card.Content>
<Card.Cover
source={{ uri: item.jetpack_featured_media_url }}
/>
</Card>
)}
keyExtractor={(item,index) => index.toString()}
/>
</View>
Hope this helps!