Array with three elements but length 0

Question

I have a component in my React Native project if you pass it data in props it renders it but if you don't it renders some text.

constructor(props) {
        super(props);
        this.state = {
            dropDownAnimation: new Animated.Value(0),
            dropDownElements: false,
            data: props.data
        }
    }

    getSnapshotBeforeUpdate(prevProps, prevState) {
        if(prevProps.open != this.props.open || this.props.data != prevProps.data) {
            return true;
        }
        return null;
    }

    componentDidUpdate(prevProps, prevState, snapshot) {
        if (snapshot == true) {
            console.log('componentdidupdate', this.props)
            this.runAnimation();
            this.setState({data: this.props.data})
        }
    }

render() {
        console.log('data', this.state.data[0], this.state.data[0] == undefined)
        return (
            <View>
                {this.state.data.length > 0 ? this.renderDropDownElements() : this.props.noElementComponent}
            </View>
        );
    }

At the start it renders the text and it prints this.props.data as empty. Then it prints three element in data but length 0 and it doesn't re-renders

--- EDIT --- this is the code of the parent component that produces data and passes it to the component which is not working properly:

class Archive extends Component {

    constructor() {
        super();
        this.state = {
            data: [],
            dropDownOpen: false,
        }
        this.getData();
    }

    getData = async () => {
        var data = await returnImportantTasks(() => {})
        this.setState({data: data})
    }

    render() {
        return (
            <View style={{flex: 1}}>
                <View style={{ flex: 1, height: height, widht: width, alignItems: 'center', justifyContent: 'center' }}>
                    <Text>Compiti Importanti</Text>
                    <TouchableOpacity onPress={() => this.setState((prevState) => ({dropDownOpen: !prevState.dropDownOpen}))}><Text>Open</Text></TouchableOpacity>
                    <DropDownPicker 
                        child={<SubjectCard/>} 
                        data={this.state.data} 
                        open={this.state.dropDownOpen} 
                        noElementComponent={<Text>Non ci sono compiti importanti</Text>}
                    />
                </View>
                <TouchableOpacity 
                    style={styles.menuBtn} 
                    onPress={() => {this.props.navigation.openDrawer()}}
                >
                    <BaseCard style={styles.circle}>
                        <MenuIcon />
                    </BaseCard>
                </TouchableOpacity>
            </View>
        );
    }
}

Answer 1

The state might not be refreshing when the new props are being passed in. Try using componentDidUpdate .

componentDidUpdate(prevProps){
    if(prevProps.data !== this.props.data) {
        this.setState({data: prevProps.data})
    }
}

This will force a state update if this.props.data updates.