I have been trying to render data for view using
FlatList
but instead of displaying the hard-coded values, it is displaying blank screen.
This is what I have done do far.
NB: I intentionally omit
import elements from react
import { List, ListItem } from "react-native-elements";
const attendants = [{
courseName: 'comp',
lecturer: 'Akanbi T.B',
students: 'Tunde Ajagba',
date: '10/11/2020',
no: 1,
},{
courseName: 'comp',
lecturer: 'Akanbi T.B',
students: 'Tunde Ajagba',
date: '09/11/2020',
no: 2,
},
{
courseName: 'comp',
lecturer: 'Akanbi T.B',
students: 'Tunde Ajagba',
date: '08/11/2020',
no:3,
},
];
export default class ViewAttendance extends Component {
constructor(props) {
super(props);
this.state = {
data: [],
}
}
componentDidMount() {
this.setState({
data: [...this.state.data, ...attendants],
});
}
render() {
return (
<Container style={styles.containerStyle}>
<List>
<FlatList
data={this.state.data}
renderItem={({ item }) => (
<ListItem
title={`${item.lecturer} ${item.courseName}`}
subtitle={item.student}
keyExtractor={item => item.no}
/>
)}
/>
</List>
</Container>
);
}
}
What is wrong with the above codes? What can I do to make the code work?
As pointed out by Noor, the most likely problem is with <List>
component,
Though I don't know the actual makeup of ListItem
, I tried to emulate it.
Here is the working example:
//import { List, ListItem } from 'react-native-elements';
import React, { Component } from 'react';
import {
Text,
View,
FlatList,
StyleSheet,
} from 'react-native';
const attendants = [
{
courseName: 'comp',
lecturer: 'Akanbi T.B',
students: 'Tunde Ajagba',
date: '10/11/2020',
no: 1,
},
{
courseName: 'comp',
lecturer: 'Akanbi T.B',
students: 'Tunde Ajagba',
date: '09/11/2020',
no: 2,
},
{
courseName: 'comp',
lecturer: 'Akanbi T.B',
students: 'Tunde Ajagba',
date: '08/11/2020',
no: 3,
},
];
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
data: [],
};
}
componentDidMount() {
this.setState({
data: [...this.state.data, ...attendants],
});
}
render() {
return (
<View style={styles.container}>
<FlatList
data={this.state.data}
renderItem={({ item }) => (
<ListItem
title={`${item.lecturer} ${item.courseName}`}
subtitle={item.students}
keyExtractor={(item) => item.no}
/>
)}
/>
</View>
);
}
}
const ListItem = ({title, subtitle}) => {
return (
<>
<View style={styles.listContainer}>
<Text style={styles.title}>
{title}
</Text>
<Text style={styles.subtitle}>{subtitle}</Text>
</View>
</>
);
};
const styles = StyleSheet.create({
container: {
marginTop: 20,
},
listContainer: {
height: 40,
backgroundColor: 'teal',
margin: 5,
paddingHorizontal: 5,
borderRadius: 4,
},
subtitle: { fontSize: 12, color: 'rgba(0,0,10,0.5)' },
title: { fontSize: 14, color: 'white', fontWeight: 'bold' },
});
Screenshot:
Live Expo Snack Link
Change item.student
to item.students
subtitle={item.student}
and remove <List>
from code
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.