React Native TypeError: Cannot read property 'projectName' of undefined

Question

I'm not sure why the code inside the if conditional is still being parsed when it should just be skipped through despite meeting the condition. this.state.projectInfo is just an empty array ([]).

Not sure why TypeError: Cannot read property 'projectName' of undefined is still being returned as an error. Any help would be greatly appreciated!

renderProject(i){
    if(this.state.projectInfo !=='undefined'){
        return(
            <View>
                <Text>You are going to list the following project</Text>
                <Panel
                    style={styles.thirdHeaderContainer}
                    header={this.state.projectInfo[i].projectName}>
                    <View style={{ flexDirection: "row" }}>
                        <Image style={{
                            width: 60,
                            height: 60,
                        }}
                        source={require('./robotics.png')} />
                        <View style={{ flexDirection: "column" }}>
                            <Text>
                                {this.state.projectInfo[i].faculty}
                            </Text>
                            <Text>
                                Listed by: John Smith
                            </Text>
                            <Text>
                                Collaborators: {this.state.projectInfo[i].collaborators}
                            </Text>
                        </View>
                    </View>
                    <View style={{ flexDirection: "row" }}>
                        <Text>This project requires skills that you have: </Text>
                        <Image style={{
                            width: 20,
                            height: 20
                        }}
                            source={require('./robotics.png')} />
                    </View>
                    <View style={{ flexDirection: "row" }}>
                        <Text>This project is suitable for your faculty: </Text>
                        <Image style={{
                            width: 20,
                            height: 20
                        }}
                            source={require('./computing.png')} />
                    </View>
                    <Text style={{ padding: '10' }}>Project Details:</Text>
                    <Text>
                        {this.state.projectInfo[i].projectDetails}
                    </Text>
                    <Button
                        variant="contained"
                        color="primary"
                        size='medium'
                        onClick={() => this.setState({ showAlert: true })}>
                        {this.state.projectInfo[i].expressInterest}
                    </Button>
                    <ModalEnhanced
                        showAlert={this.state.showAlert}
                        closeAlert={() => this.setState({ showAlert: false })}
                        text={this.state.projectInfo[i].alertText}
                    />
                </Panel>
            </View>
            )
    }else{
        return (
            <View>
                <Text>GO HOME</Text>
            </View>
        )
            
    }

Answer 1

The conditional validation is not actually validating the object that you want to use.

this.state.projectInfo[i].projectName

As you can see, you use the variable "i" here, so you should update your conditional validation to validate it.

Like:

if(this.state.projectInfo && this.state.projectInfo[i]){
...
}else{
...
}