Menu
I have a strange error. I have a FlatList that renders the items from the mapStateToProps which returns the classes resulted from a firebase fetch. In that _.map(state.classes... i return the class conditionally but if i dont'return something in else i get an error from inside the flatlist that is complaining that a prop is missing but if i return an empty object instead i dont get any errors and the render is as expected. The thing is that i want to know if this is the normal behavior. Do i need to return something? why does it complain that a prop is missing if i dont return that object at all? Thanks in advance, Vlad!
import React, { Component } from "react";
import {
Text,
View,
FlatList,
NativeModules,
LayoutAnimation,
Alert,
Modal,
TouchableHighlight
} from "react-native";
import _ from 'lodash';
import { Icon, Container } from 'native-base';;
import { CardSection, Confirm } from '../../common/index'
import { connect } from 'react-redux';
import { fetchClasses, fetchStudents } from '../../../actions/index';
import { List, ListItem, Header } from "react-native-elements"
import Icon1 from 'react-native-vector-icons/FontAwesome';
const { UIManager } = NativeModules
UIManager.setLayoutAnimationEnabledExperimental
&& UIManager.setLayoutAnimationEnabledExperimental(true)
class Home extends Component {
constructor() {
super();
this.state = {
selectedUid: null,
isModalVisible1: false,
currentClass: {},
currentStudent: {},
months: ['Ianuarie', 'Februarie', 'Martie', 'Aprilie', 'Mai', 'Iunie', 'Iulie', 'August', 'Septembrie', 'Octombrie', 'Noiembrie', 'Decembrie']
}
}
componentWillMount() {
this.props.fetchClasses();
this.props.fetchStudents();
}
componentDidUpdate() {
LayoutAnimation.spring();
}
static navigationOptions = {
header: null
}
render() {
return (
<Container style={{ marginBottom: 5 }}>
<Header
backgroundColor={'#1E6EC7'}
placement="left"
leftComponent={{ icon: 'menu', color: '#fff' }}
centerComponent={{ text: 'Programul Zilei', style: { color: '#fff', fontWeight: 'bold', fontSize: 22 } }}
rightComponent={<Icon name="ios-add" style={{ color: 'white' }} onPress={() => this.props.navigation.navigate('AddClass', this.props.students)} />}
/>
<List>
<FlatList
data={this.props.classes}
keyExtractor={(item, index) => `${index}`}
extraData={this.state}
renderItem={({ item }) => {
let wantedEmployee = null
if (this.props.students !== []) {
this.props.students.forEach(student => {
if (student.uid === item.studentUid)
wantedEmployee = student;
});
if (wantedEmployee !== null)
return <View><ListItem
leftIcon={<Icon1 name="times" size={24} style={{ paddingRight: 10, color: 'red' }} onPress={() => {
this.setState({ currentStudent: wantedEmployee })
this.setState({ currentClass: item })
this.setState({ isModalVisible1: true })
}} />}
onPress={() => {
if (this.state.selectedUid !== item.uid)
this.setState({ selectedUid: item.uid })
else
this.setState({ selectedUid: null })
}}
title={`${item.hour}:${item.minutes}: ${wantedEmployee.nume}`}
subtitle={item.year}
rightIcon={this.state.selectedUid === item.uid ? <Icon name="md-arrow-dropdown" /> : <Icon name="md-arrow-dropright" />}
/>
{this.state.selectedUid === item.uid ?
<View><CardSection><Text>Nume: <Text style={{ fontWeight: 'bold' }}>{wantedEmployee.nume}</Text></Text></CardSection>
<CardSection><Text>Numar de Telefon: <Text style={{ fontWeight: 'bold' }}>{wantedEmployee.phone}</Text></Text></CardSection>
<CardSection><Text>CNP: <Text style={{ fontWeight: 'bold' }}>{wantedEmployee.cnp}</Text></Text></CardSection>
<CardSection><Text>Numar Registru: <Text style={{ fontWeight: 'bold' }}>{wantedEmployee.registru}</Text></Text></CardSection>
<CardSection><Text>Serie: <Text style={{ fontWeight: 'bold' }}>{wantedEmployee.serie}</Text></Text></CardSection></View>
: null}
</View>
}
}
}
/>
</List>
<Confirm visible={this.state.isModalVisible1} onDecline={() => this.setState({ isModalVisible1: false })}>
Esti sigur ca vrei sa stergi sedinta de pe <Text style={{ fontWeight: 'bold' }}>{this.state.currentClass.day} {this.state.months[this.state.currentClass.month]} {this.state.currentClass.year}</Text> cu <Text style={{ fontWeight: 'bold' }}>{this.state.currentStudent.nume}</Text>?
</Confirm>
</Container>
);
}
}
const mapStateToProps = (state) => {
function compare(a, b) {
if (a.nume < b.nume)
return -1;
if (a.nume > b.nume)
return 1;
return 0;
}
function compareClasses(a, b) {
if (a.hour < b.hour)
return -1;
if (a.hour > b.hour)
return 1;
return 0;
}
const date = new Date();
const year1 = date.getFullYear();
const month1 = date.getMonth();
const day1 = date.getDate();
const classes = _.map(state.classes, (val, uid) => {
const { year, month, day, hour, minutes, studentUid } = val;
if (year === year1 && month === month1 && day1 === day)
return { year, month, day, hour, minutes, studentUid, uid };
else
return {}
});
const students = _.map(state.studentsFetch, (val, uid) => {
return { ...val, uid };
});
classes.sort(compareClasses)
students.sort(compare)
return { classes, students };
}
export default connect(mapStateToProps, { fetchClasses, fetchStudents })(Home);
337
Inside the function we need to return something. As the map() method calls the function on each item in the array, whatever we return in the function becomes that items value. Therefore if we return person we will get back exactly what we had in the original array.
map() function returns a map object(which is an iterator) of the results after applying the given function to each item of a given iterable (list, tuple etc.) Syntax : map(fun, iter)
Returns the value to which the specified key is mapped, or null if this map contains no mapping for the key. More formally, if this map contains a mapping from a key k to a value v such that (key==null ? k==null : key. equals(k)) , then this method returns v ; otherwise it returns null .
The map functions transform their input by applying a function to each element of a list or atomic vector and returning an object of the same length as the input. map() always returns a list.
It seems like what you're trying to do is filter out data from your array. One solution may be using the filter method rather than the map method since map expects something to be returned:
Produces a new array of values by mapping each value in list through a transformation function
172
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
