CODEWITHSUNDEEP
javascriptparse-platformreactjs
Gardezi
Gardezi

Reputation: 2842

Reactjs rendeing of component after parse find query

I am trying to do is when the page is being loaded it should bring all the data from the parse.com database and display it on the page and I want to render my component after my find request is done.

Below you can see my code

var Ap = React.createClass({

    render: function(){
      Parse.initialize("mSWrLtmIHQdh8CNGk14fLbnK4gaVDbgvjw1zTeCT", "qKDkELvVpvgkuDDZzGK2pdP5o69LBDjWaRI2XfUb");
      var GameScore = Parse.Object.extend("TestObject");

      var query = new Parse.Query(GameScore);
      var x;
      query.find({
      success: function(results) {
          //debugger;
         var cells = [];
         for (var i in results) {
            cells.push(<tr><td>"foo"</td><td>{i.attributes.foo}</td></tr>);}
        return (
          <div id="second-div">
            <table>
              {cells}
            </table> 
          </div>
          )

      },

      error: function(error) {
        return(<div></div>)

      }
});
    }

  }
  );

  React.renderComponent(<Ap/>,  document.body);

</script>

But i get the error below because i am returning render inside the done method of my find query.

Uncaught Error: Invariant Violation: Ap.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.

Is there a way to wait for my find query to end before start rendering

and I'm also having another which I was not able to understand

Uncaught TypeError: Cannot read property 'foo' of undefined

Since I'm new to reactjs and parse so any help would be appreciated

Upvotes: 1

Views: 931

Answers (2)

okm
okm

Reputation: 23871

  1. The problem is you returned undefined from your render(). Because after an ajax call there is no more code and render() had to return undefined that caused the error. You could put the query into componentDidMount() or some methods running earlier or some parent components/outer code and pass props to <Ap /> or set its state.

  2. {i.attributes.foo} may cause the Uncaught TypeError: Cannot read property 'foo' of undefined. Thus your i.attributes was undefined instead of some meaningful object such as results[i].attributes.

Upvotes: 1

const314
const314

Reputation: 1630

Perform a request in component's componentDidMount method and assign the results to component's state. This will cause component's rendering.

In render method read the data from the state.

var Ap = React.createClass({
    getInitialState: function(){
        return {
            data: []
        }
    },
    componentDidMount: function(){
        var that = this;
        Parse.initialize("mSWrLtmIHQdh8CNGk14fLbnK4gaVDbgvjw1zTeCT", "qKDkELvVpvgkuDDZzGK2pdP5o69LBDjWaRI2XfUb");
        var GameScore = Parse.Object.extend("TestObject");

        var query = new Parse.Query(GameScore);

        query.find({
            success: function(results) {
                that.setState({
                    data: results
                });
            },
            error: function(error) {
                that.setState({
                    data: []
                });

            }
        });
    },
    render: function(){
        var cells = [];
        for (var i in this.state.data) {
            cells.push(<tr><td>"foo"</td><td>{this.state.data[i].attributes.foo}</td></tr>);
        }
        return (
          <div id="second-div">
            <table>
              {cells}
            </table> 
          </div>
          )
    }
});

React.renderComponent(<Ap/>,  document.body);

Upvotes: 1

Related Questions