How to pass json values into React component

Question

I am creating an Github issue viewer with React.

I have a component that sets the repo, then I want to create separate components to get the issue name, number, login etc. These components will ultimately be used in the main component/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.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 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

Possible duplicate of How can I prevent a component from rendering before data is loaded? — Evan Davis
– 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 component solution. — Evan Davis
– Evan Davis, Commented Jan 27, 2016 at 20:29

Nam · Accepted Answer · 2016-01-27 20:30:12Z

1

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

var GetRepo = React.createClass({

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

    componentDidMount: function(){
        var that = 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 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'));

edited Jan 27, 2016 at 20:30

answered Jan 27, 2016 at 20:24

Nam

1211 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

pawel Over a year ago

I think you should call the getRepo method somewhere, possibly in componentDidMount.

Nam Over a year ago

@pawel Yes. Thanks :)

essjay Over a year ago

Thanks, this is helpful. However, it outputs this.props.repo.title and this.props.repo.number as text. Seems like I need to parse the JSON data?

Collectives™ on Stack Overflow

How to pass json values into React component

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related