React-native function not returning get data - react-native

Question

I see just "t pera" but not gotten name from getStudentName function before "t pera".
import React, { Component } from 'react';
import {
Alert,
AppRegistry,
StyleSheet,
Text,
Navigator,
TextInput,
View,
Platform,
TouchableHighlight,
TouchableNativeFeedback,
} from 'react-native';
export class Student extends Component {
getStudentName() {
return fetch('http://192.168.1.14:3005/api/users/57bf7c101a7c1a892f6a19bc')
.then((response) => response.json())
.then((responseJson) => {
return responseJson.name;
})
.catch((error) => {
console.error(error);
})
}
onButtonPress(){
this.props.navigator.push({
id: 'Student'
})
}
render() {
return(
<View style={styles.container}>
<TextInput style={styles.input}
placeholder = "peki"
/>
<Text>
{this.getStudentName}t pera
</Text>
<TouchableHighlight style={styles.button1} onPress={this.getStudentName}>
<Text style={styles.nastavi}>Nastavi</Text>
</TouchableHighlight>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#FFFFFF',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
padding: 30
},
input: {
borderBottomColor: 'grey',
borderBottomWidth: 1,
height: 40,
width: 250
},
button1: {
height: 40,
borderRadius: 5,
backgroundColor: '#4a4de7',
width: 250,
marginTop: 20,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center'
},
button2: {
height: 40,
borderRadius: 5,
backgroundColor: 'black',
width: 250,
marginTop: 20,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center'
},
nastavi: {
color: 'white',
fontSize: 15
}
});
module.exports = Student;

Answer 1

It's because your getStudentName() method isn't returning the string you're expecting, but a promise. You should update the state of your component from the result, rather than returning anything.
Notice below that I've replaced "this.getStudentName" with this.state.studentName, which will return an empty string (as defined in the constructor) until the promise from your method getStudentName() updates the state. Once the promise is finished and the state updates, it'll automatically refresh your views to show the student name.
export class Student extends Component {
constructor(props) {
super(props);
this.state = {
studentName: ''
};
}
componentDidMount() {
this.getStudentName();
}
getStudentName() {
var self = this;
return fetch('http://192.168.1.14:3005/api/users/57bf7c101a7c1a892f6a19bc')
.then((response) => response.json())
.then((responseJson) => {
self.setState({
studentName: responseJson.name
});
})
.catch((error) => {
console.error(error);
});
}
onButtonPress(){
this.props.navigator.push({
id: 'Student'
})
}
render() {
return(
<View style={styles.container}>
<TextInput
style={styles.input}
placeholder = "peki" />
<Text>
{this.state.studentName}t pera
</Text>
<TouchableHighlight style={styles.button1} onPress={this.getStudentName.bind(this)}>
<Text style={styles.nastavi}>Nastavi</Text>
</TouchableHighlight>
</View>
);
}