I've read tens of threads on FlatList, and I can't seem to get this to work. This is extremely basic so I must be missing something rudimentary. Why is this returning a blank screen?
import React from "react";
import { View, Text, FlatList } from "react-native";
export default function App() {
const renderItem = ({ item }) => {
console.log(item);
return (
<View>
<Text>{item.title}</Text>
</View>
);
};
const keyExtractor = (item) => item.id;
return (
<View>
<FlatList>
data=
{[
{ id: 1, title: "1" },
{ id: 2, title: "2" }
]}
renderItem={renderItem}
keyExtractor={keyExtractor}
</FlatList>
</View>
);
}
https://codesandbox.io/s/quirky-chandrasekhar-jgjj28?file=/src/App.js
CodePudding user response:
Your code has an error data, keyExtractor, renderItem
are props for the FlatList
you use them like a text/children
it must look like this:
import React from "react";
import { View, Text, FlatList } from "react-native";
export default function App() {
const renderItem = ({ item }) => {
console.log(item);
return (
<View>
<Text>{item.title}</Text>
</View>
);
};
const keyExtractor = (item) => item.id;
return (
<View>
<FlatList
data=
{[
{ id: 1, title: "1" },
{ id: 2, title: "2" }
]}
renderItem={renderItem}
keyExtractor={keyExtractor}>
</FlatList>
</View>
);
}