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

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) 
}