0

This is my first time asking a question so I am a true SO newbie. I am currently working on a mobile app and I am using Parse React and Ratchet to build it. I have read the React documentations on FB github and apparently do not understand all enough to solve some problems. One of my problems is using the results of a Parse Query in the observe function of the declared ParseComponent as a value of a rendered react component, which in turn attempts to render the passed value as HTML. Below is the parent object:

export default class CategoryPage extends ParseComponent
{
    observe(props,state){
        return{
            category: new Parse.Query('BusinessCategory').equalTo("objectId", this.props.categoryId)
    };
}

render() {        
    return (
        <div>
        <Header text={this.data.category.objectId} back="true"/>
            <div className="content">
                <BusinessList categoryId={this.data.category.objectId}/>
            </div>
            <NavBar />                                
        </div>

    );
}

};

Notice I am passing the objectId of the category found in the Query as a text attribute of the Header React component. I am expecting Header as a child to use the passed property as follows:

var Header = React.createClass({
    render: function () {
        return(
            <header className="bar bar-nav">
                <h1 className="title">{this.props.text}</h1>
            </header>
        );
    }
});

However the h1 is not rendering anything! I am thinking that this.data.category.objectId is a string and therefore should be rendered in the h1 tag as a string.

I do appreciate your answers very much.

tremayne flanders
  • 41
  • 8
  • Yes you are correct, probably `this.data.category.objectId` is empty, try console logging it, perhaps you should explain how that is getting assigned to? If it is getting something assigned to it, but after a delay, then the problem is that render is not being called again (render is only re-called automatically by default if the component `this.state` changes) – Dominic Oct 22 '15 at 11:30
  • Yes I forgot to mention when I used the console I got the BusinessCategory object successfully but not the business list. It is empty. The console reads: {"results":[]} so nothing is being assigned to Header text attribute via the this.data.category.objectId value, although when I print the this.data.category I am getting the entire object printed via the browser – tremayne flanders Oct 22 '15 at 13:47

0 Answers0