javascript - How to pass json values into React component -
i creating github issue viewer react.
i have component sets repo, want create separate components issue name, number, login etc. these components used in main component/view. i'm bit stuck, below have far.
var getrepo = react.createclass({ getrepo: function(){ var issues = $.getjson('https://api.github.com/repos/facebook/react/issues', function (data) { }) }, render: function() { return <div>my repo: {this.props.repo}</div> } }); reactdom.render(<getrepo repo="facebook/react/issues" />, document.getelementbyid('main')); var issuename = react.createclass({ }); //issuename gets data.title (the issue name) using repo getrepo var issuenumber = react.createclass({ }); //issuenumber gets data.number (the issue number) using repo getrepo
certainly not way it, following should work:
var getrepo = react.createclass({ getinitialstate: function() { return { repo: {} }; }, componentdidmount: function(){ var = this; var issues = $.getjson('https://api.github.com/repos/facebook/react/issues', function (data) { that.setstate({ repo: data }); }); }, render: function() { return ( <div> <issuename repo={this.state.repo} /> <issuenumber repo={this.state.repo} /> </div> ); } }); //issuename gets data.title (the issue name) using repo getrepo var issuename = react.createclass({ render: function() { return ( <div>this.props.repo.title</div> ); } }); //issuenumber gets data.number (the issue number) using repo getrepo var issuenumber = react.createclass({ render: function() { return ( <div>this.props.repo.number</div> ); } }); reactdom.render(<getrepo repo="facebook/react/issues" />, document.getelementbyid('main'));
Comments
Post a Comment