reactjs - Component not being rendered -

reactjs - Component not being rendered -

i new react , i'm trying build larn concepts.

i have created react components can't figure out why post component aren't beingness rendered after json request done successful.

note: posts , postlist components rendering no problem.

what missing here?

/** @jsx react.dom */ var posts = react.createclass({ render: function() { homecoming ( <div classname="posts"> <h3>featured jobs</h3> <postlist /> <p>more awesome jobs →</p> </div> ) } }); var postlist = react.createclass({ getinitialstate: function() { homecoming { posts: [ ] }; }, componentdidmount: function() { $.getjson('/api/posts', function(results) { this.setstate({ posts: results }); }.bind(this)); }, render: function() { var posts = this.state.posts.map(function(post) { homecoming <postlistitem post={post} />; }); homecoming <ul classname='post-list'>{posts}</ul>; } }); var postlistitem = react.createclass({ handleclick: function(e) { var post_id = this.props.post.id; var path = '/api/posts/' + post_id; $.getjson(path, function(post) { homecoming <post title={post.title} location={post.location} description={post.description} />; }); }, render: function() { homecoming ( <div classname="post-item"> <li key={this.props.post.id}><a href="#" onclick={this.handleclick}>{this.props.post.title}</a></li> </div> ); } }); var post = react.createclass({ render: function() { return( <div classname="post"> <h1>{this.props.title}</h1> <h2>{this.props.location}</h2> <p>{this.props.description}</p> </div> ); } });

ps: i'm rendering posts component through rails helper, can assume working fine.

thank in advance :)

you need find way pass info post in ajax callback (returning component nothing). 1 way utilize setprops, like:

$.getjson(path, function(post) { post.setprops(post); });

note can done root-level components (as stated in docs). maybe need find more generic way handle reactive info (backbone etc).

reactjs react-jsx