I am creating an Github issue viewer with React.

I have a ponent that sets the repo, then I want to create separate ponents to get the issue name, number, login etc. These ponents will ultimately be used in the main ponent/view. I'm a bit stuck, below is what I have so far.

var GetRepo = React.createClass({
getRepo: function(){
    var issues = $.getJSON('', 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 the data.title (the issue name) using repo GetRepo

var IssueNumber = React.createClass({
});

//IssueNumber gets the data.number (the issue number) using repo from GetRepo

I am creating an Github issue viewer with React.

I have a ponent that sets the repo, then I want to create separate ponents to get the issue name, number, login etc. These ponents will ultimately be used in the main ponent/view. I'm a bit stuck, below is what I have so far.

var GetRepo = React.createClass({
getRepo: function(){
    var issues = $.getJSON('https://api.github./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 the data.title (the issue name) using repo GetRepo

var IssueNumber = React.createClass({
});

//IssueNumber gets the data.number (the issue number) using repo from GetRepo

• javascript
• json
• reactjs

• What's your question? Where are you stuck? – Nicholas Commented Jan 27, 2016 at 20:10
• Possible duplicate of How can I prevent a ponent from rendering before data is loaded? – Evan Davis Commented Jan 27, 2016 at 20:29
• It's not an exact duplicate as-asked, but I think this type of problem is most readily solved with the container ponent solution. – Evan Davis Commented Jan 27, 2016 at 20:29

1 Answer 1

Certainly not the only way to do it, but the following should work:

var GetRepo = React.createClass({

    getInitialState: function() {
        return {
            repo: {}
        };
    },

    ponentDidMount: function(){
        var that = this;
        var issues = $.getJSON('https://api.github./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 the data.title (the issue name) using repo GetRepo
var IssueName = React.createClass({
    render: function() {
        return (
            <div>this.props.repo.title</div>
        );
    }
});

//IssueNumber gets the data.number (the issue number) using repo from GetRepo
var IssueNumber = React.createClass({
    render: function() {
        return (
            <div>this.props.repo.number</div>
        );
    }
});

ReactDOM.render(<GetRepo repo="facebook/react/issues" />, document.getElementById('main'));