How to re-render Flatlist in React Native using componentWillRecieveProps? - reactjs

Question

UNSAFE_componentWillMount(){
this.props.EmployeeFetch();
}
renderRow(employee){
return <ListItem employee={employee}/>;
}
render(){
return(
<FlatList style={{flex:1,height:100}}
data = {this.props.employees}
/>
);
}
}
const mapStateToProps=state=>{
const employees = _.map(state.employees,(val,uid)=>{
return {...val,uid};
});
return {employees};
}
export default connect(mapStateToProps, {EmployeeFetch})(EmployeeList);
Here I am fetching data from firebase. At first it came null and after some time data came. So, how will I re-render the new data using the Flatlist and componentWillRecieveProps()?

Answer 1

you should use 2 return function.
1 which return loading (activity indicator)
2 which return data if data exists in any state.
constructor(props) {
super(props);
this.state = { isLoading: true};
}
render() {
if(this.state.isLoading){
return(
<View>
<ActivityIndicator size="large" color="#0c9"/>
</View>
)}
return(
<FlatList style={{flex:1,height:100}}
data = {this.props.employees}
/>
);
const mapStateToProps=state=>{
const employees = _.map(state.employees,(val,uid)=>{
return {...val,uid};
});
if(employees){
this.state.isLoading = false;
}
return {employees};
}
note: do not forget to import react components
and also if you are using react navigation then try to use to navigation events for data fetch api rather than using UNSAFE_componentWillMount() or find some other solution.

Answer 2

So componentWillReceiveProps is deprecated, you should use getDerivedStateFromProps.
You can use it like this with your example:
static getDerivedStateFromProps(props, state) {
const { employees } = this.props;
return employees;
}
Then in your render:
render() {
const { employees } = this.props;
// then use map(employees)
}