View only rendering when not refering to array - reactjs

Question

It seems that i miss something during my first react native project:
The render function is not rendering the view when i try to display an array which is assigned to state.
i can only console log the array (in the setState callback) while also render the view when i comment out the part where i refer to the array.
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
loading: false,
array: [],
token: '',
}
}
setLoading = () => {
this.setState({ loading: true }, () => this.login())
}
login = async () => {
try {
const response = await
fetch(`http://10.0.2.2`);
const res = await response.json();
this.setState({
name: res.name,
address: res.address,
token: res.token,
}, function () {
this.setState({
array: res.array,
loading: false
}, function () {
//only reaching when commented out the array-part in the render
//function
console.log(this.state.array[0].grade)
});
})
}
catch{
console.log('in CATCH ERROR')
} }
render() {
if (this.state.loading) {
return (
<View>
<ActivityIndicator />
</View>
);
}
return this.state.token ? (
<View >
<Text> {this.state.name}</Text>
//this works !
<Text> {this.state.array[0].prof}</Text>
//only rendering without the mapping of the array
{/*this.state.array.map((item, i) => (
<div key={i}>
<Text >Grade : {item.grade}</Text>
<Text >Class : {item.class}</Text>
<Text >Proffessor : {item.prof}</Text>
</div>
))*/}
</View>
) : (
<View>
<TextInput
value={this.state.username}
onChangeText={(username) => this.setState({ username })}
placeholder={'Username'}
/>
<TextInput
value={this.state.password}
onChangeText={(password) => this.setState({ password })}
placeholder={'Password'}
secureTextEntry={true}
/>
<Button
title={'Login'}
style={styles.input}
onPress={this.login.bind(this)}
/>
</View>
)
};
according to the docs this should be possible.. any Pro here that has an idea why this is happening?