ReactJS/Javascript/Graphql/React-apollo: Cannot read property 'loading' of undefined

Question

I am calling displayElements from the render function and getting this error: TypeError: Cannot read property 'loading' of undefined. Why is this error showing up? The reason I think this error is showing up is because here will be no results upon initial rendering. But when the submit button is click a query to the DB gets executed and I would like to display the results using the displayElements.

displayElements(){
        var data = this.props.getObjectsQuery;
        console.log(this.props);
        if(data.loading){
          return <option disabled>Loading...</option>;
        }else{
          return data.action.map(action => {
            return(<option key={action.action} value={action.timestamp}>{action.filename}</option>);

          })
        }
      }

Submit Button

handleSubmit = event => {
        event.preventDefault();

        console.log(this.state);
        this.setState({
          startTime: new Date(document.getElementById("startTime").value).valueOf(),//getElementById is a jQuery method
          endTime: new Date(document.getElementById("endTime").value).valueOf()
        }, () => {
          this.props.data.refetch({//Assign the inputvalues, which is the current state, to the variables after pressing the submit button
            startTime: this.state.startTime,
            endTime:this.state.endTime
          });
          console.log(this.state.startTime);
          console.log(this.state.endTime);
        });
      };

McRist · Accepted Answer · 2018-08-19 06:18:52Z

1

Write the conditon as if(data) and then write your code.

  displayElements(){
    var data = this.props.getObjectsQuery;
    console.log(this.props);
    if(data) {
      if(data.loading){
        return <option disabled>Loading...</option>;
      }else{
        return data.action.map(action => {
          return(<option key={action.action} value={action.timestamp}>{action.filename}</option>);
        })
      }
    }

  }

edited Aug 19, 2018 at 6:18

answered Aug 19, 2018 at 6:02

McRist

1,78811 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

N6DYN Over a year ago

Now its saying this:TypeError: Cannot read property 'action' of undefined

McRist Over a year ago

how are you passing getObjectsQuery to this component ??

N6DYN Over a year ago

import getObjectsQuery from '../Queries';

McRist Over a year ago

then don't use props to access getObjectsQuery . console.log(getObjectsQuery) and check what it is logging

N6DYN Over a year ago

Upon initial loading this error shows up: TypeError: Cannot read property 'action' of undefined.

|

Collectives™ on Stack Overflow

ReactJS/Javascript/Graphql/React-apollo: Cannot read property 'loading' of undefined

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related