CODEWITHSUNDEEP
javascriptreactjsreact-native
Imdad Ali
Imdad Ali

Reputation: 737

React Native: Error:"Cannot read property 'name' of undefined, " Although object which contains name is not undefined

I am new to react and working on a project in react native. I have loaded data from the server using fetch, Data is available, if i console it shows up, but when i render the data it show undefined. Being from angular background i know the data is available late for rendering, if i put some conditions then the error will go away. What i want is not to put condition on every single variable, What is the better way to manage it like we use "*ngIf" in Angular on whole content, show only if data is available. what i tried so far is below.

Fetching Data

componentDidMount() {
this._fetchData();


}

  _fetchData = () => {
    if (this.state.loading) { return; }
    this.setState({ loading: true });
    let typr = this._returnReqType(this.state.requestType)
    let include = [
      'application',
      'association:id,name',
      'unit:id,unit_number',
      'status_history',
      'status_history.user',
    ];
    EservicesService.getEservicesRequestDetails(this.state.requestId, typr, include).then(response => {
      console.log(response.record); // {prop1:'XXXXXXX',association:{name:'Association 1', ...}, ... }
      console.log(response.record.association); // {name:'Association 1', ...}
      this.setState({
        error: response.error || null,
        loading: false,
        request: response.record
      });

    }).catch(error => {
      this.setState({ error, loading: false });
    });



    }

Rendering Data

render() {
console.log(this.state.request); // {prop1:'XXXXXXX',association:{name:'Association 1', ...}, ... }
console.log(this.state.request.association); // {name:'Association 1', ...}
return (
  <View style={{ flex: 1 }}>
    <ScrollView>
      <Card >
        <Text>Association: {this.state.request.association_id}</Text>
        <Text>Unit: {this.state.request.association.name}</Text> {// Error Here "Cannot read 'name' of undefined" 
        }
      </Card>
    </ScrollView>
  </View>
);}

Upvotes: 2

Views: 1256

Answers (3)

Pratik Mittal
Pratik Mittal

Reputation: 163

Since fetch is an async call, So for initial render we wont get any data and hence it is throwing error. So in order to avoid these exceptions we should check for the values before doing any operation.

render() {
console.log(this.state.request); // {prop1:'XXXXXXX',association:{name:'Association 1', ...}, ... }
const {request} = this.state;
console.log(request.association); // {name:'Association 1', ...}
return (
  <View style={{ flex: 1 }}>
    <ScrollView>
      <Card >
        <Text>Association: {request.association_id && request.association_id}</Text>
        <Text>Unit: {request.association.name && request.association.name}</Text> {// Error Here "Cannot read 'name' of undefined" 
        }
      </Card>
    </ScrollView>
  </View>
);}

Upvotes: 3

lankovova
lankovova

Reputation: 1426

To prevent "falsy" render while fetching the data, you could simply put check for loading state in render function. Like this:

render() {
  if (this.state.loading) {
    return null
  }

  return <>Your fetched data</>
}

Upvotes: 0

Afia
Afia

Reputation: 683

You need to check if the name is available, then render it.

{ this.state.request.association && <Text>
 Unit: {this.state.request.association.name && this.state.request.association.name}
</Text>
}

Upvotes: 0

Related Questions