This specific scenario entails:
const blocks = [
{id: 0, content: 'HTML'},
{id: 1, content: 'CSS'},
{id: 2, content: 'JavaScript'},
{id: 3, content: 'React'},
{id: 4, content: 'Angular'},
]
const getKey = ({id}) => id
export default class Website extends Component {
showBlock = ({item}) => {
return (
<Text style={styles.block}>
{item.content}
</Text>
)
}
render() {
return (
<FlatList
style={styles.page}
data={blocks}
renderItem={this.showBlock}
keyExtractor={getKey}
/>
);
}
}
const styles = StyleSheet.create({
page: {
marginTop: 20,
flex: 1,
},
block: {
padding: 15,
marginBottom: 5,
backgroundColor: 'lightgray',
},
})
found on ,
What's the reason for defining renderItem as a function that takes ({item}) instead of just (item)? Aren't arrow functions supposed to receive arguments in "()"? What is the significance of "{}" here? If removed, it results in the text within each FlatList item disappearing.