React Native referenced object seems to be undefined

I am trying to assign data retrieved from an API into an array, however whenever the data is called my project crashed and I get an error saying TypeError: undefined is not an object (evaluating 'this.data.name')

Here is all my code regarding the variable data

    constructor(props){
    super(props);
    this.state={
      data : [],
      }
    }
async  componentDidMount(){
    try {
    const id = this.props.navigation.state.params.info

    const res = await axios.request({
      method: 'get',
      url: `https://developers.zomato.com/api/v2.1/restaurant?res_id=${id}`,
      headers: {
        'Content-Type': 'application/json',
        'user-key': 'a31bd76da32396a27b6906bf0ca707a2'
      }
    });
    this.setState({ data: res.data });
  } catch (err) {
    console.log(err);
  } finally {
    this.setState({ isLoading: false });
  }
  };

  render() {
    return (
    <View>        
        {this.state.isLoading ?
            <View style={{ flex: 1, marginTop: 200 }}>
              <ActivityIndicator style={{color:'red'}} />
            </View> :

        <View><Text>{this.data.name}</Text></View>
        }
    </View>
)}