Building a React.js App: Making Server Requests in React with Axios

Share this video with your friends

Send Tweet

In this lesson, we’ll walk through implementing Axios into our application in order to communicate with the Github API.

Richard
Richard
~ 9 years ago

Just working with the data returned from axios, and noticing issues when passing around objects in React. Is there any reference to this issue somewhere?

I am just trying to display a single property of the bio object returned from github, I can view it in the React console, however, not the on the html page. Any ideas?

So the repos display (its an array), but the bio does not display, and I notice a console error complaining about working with the object.

Tyler McGinnis
Tyler McGinnis(instructor)
~ 9 years ago

Hi Richard,

What's the exact error message you're getting in the console?

Manny
Manny
~ 9 years ago

Hey Tyler,

I'm receiving the following error after searching for a github user:

Uncaught Error: Invariant Violation: Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of UserProfile.

Below is a link to the repo for my code:

https://github.com/yooomanny/github-app

Joel Hooks
Joel Hooks
~ 9 years ago

Hey Tyler,

I'm receiving the following error after searching for a github user:

Uncaught Error: Invariant Violation: Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of UserProfile.

Below is a link to the repo for my code:

https://github.com/yooomanny/github-app

Repos.js is likely cause of error. React expects the array to be an array or elements versus objects.

render: function() {
+ const repos = this.props.repos.map(repo => <div>{repo.name}</div>)
render (
Manny
Manny
~ 9 years ago

Thanks Joel.

I'm a bit confused with your code. Am I supposed to add the green line after line 8 in my repo.js file? If so, I just gave it a shot and received the same error.

By the way, I had the same error when I had " bio: {} " in my profile.js file, but it went away after setting it to an array and requiring it as an array for the mean time. How can I allow for objects in these instances?

Joel Hooks
Joel Hooks
~ 9 years ago

Thanks Joel.

I'm a bit confused with your code. Am I supposed to add the green line after line 8 in my repo.js file? If so, I just gave it a shot and received the same error.

By the way, I had the same error when I had " bio: {} " in my profile.js file, but it went away after setting it to an array and requiring it as an array for the mean time. How can I allow for objects in these instances?

I'm just guessing. You have to add JSX elements as children, not JavaScript objects/arrays of objects. I'm not actually running and debugging your repo.

Manny
Manny
~ 9 years ago

Gotcha, thanks.

egghead eggo
egghead eggo
~ 9 years ago

The lesson video has been updated!

Alan Eng
Alan Eng
~ 9 years ago

Thanks for the video! Question -- how were we able to make an API request to Github's API without generating an access token? Does axios somehow bypass that?

Tyler McGinnis
Tyler McGinnis(instructor)
~ 9 years ago

Hi Alan,

Github allows you to make a certain number of requests without an API key. Once you pass that amount (which is quickly if anyone is actually using your app), then you get rate-limited.

Alan Eng
Alan Eng
~ 9 years ago

Gotcha, that makes sense. I hit my limit -- it was easy to do when I'm using a hot loader!

On an unrelated note, when I try to make a call to http://www.bayareabikeshare.com/stations/json, I get an Access-Control-Allow-Origin error. I'm guessing this has to do with some cross domain issue. Why were we able to make an API call to Github but not a call to any JSON endpoint?

Tyler McGinnis
Tyler McGinnis(instructor)
~ 9 years ago

Another great observation. The Github... "API supports Cross Origin Resource Sharing (CORS) for AJAX requests from any origin." (https://developer.github.com/v3/) Where as bayareabikeshare obviously does not.

Divyendu
Divyendu
~ 9 years ago

Hey Tyler, Good video, continuing to talk about

https://github.com/tylermcginnis/github-notetaker-egghead/blob/09-axios/app/utils/helpers.js

What if the promises are interdependent. In this case, the both calls required username as parameter, but how can we use Axios.all when we have two service calls A, B where parameter of B is retrieved from service call A

Tyler McGinnis
Tyler McGinnis(instructor)
~ 9 years ago

Hi Divyendu,

In that case you'd chain your promises rather than using .all. I found this tutorial that does a quick job of explaining how you'd do that - https://html5hive.org/how-to-chain-javascript-promises/.

Huy Tran
Huy Tran
~ 9 years ago

Invalid prop bio of type object supplied to UserProfile, expected array. Check the render method of Profile.

Here are my codes:

getInitialState: function(){ return { bio: {}, repos: [], notes: [] }; }, // UserProfile file propTypes: { username: React.PropTypes.string.isRequired, bio: React.PropTypes.object.isRequired },

Please help me to solve this. Thank you in advance !

Emily
Emily
~ 9 years ago

I'm noticing that in Profile.js, in the componentDidMount function, 'this.props.username' is not defined, I had to instead pass in 'this.props.params.username'. Could this have something to do with the context of 'this' at point? I did include .bind(this) so I'm not sure what's going on :/

Emily
Emily
~ 9 years ago

Oops nevermind! I see that using 'his.props.params.username' is actually what is intended to be there... realizing username isn't even in props

Dane Iliff
Dane Iliff
~ 9 years ago

this lesson was beautiful, great job.

Jun
Jun
~ 9 years ago

I got all the code running, but found an error from the chrome console. Does anyone have any idea why this can be happening?

Uncaught (in promise) Error: Objects are not valid as a React child (found: object with keys {id, name, full_name, owner, private, html_url, description, fork, url, forks_url, keys_url, collaborators_url, teams_url, hooks_url, issue_events_url, events_url, assignees_url, branches_url, tags_url, blobs_url, git_tags_url, git_refs_url, trees_url, statuses_url, languages_url, stargazers_url, contributors_url, subscribers_url, subscription_url, commits_url, git_commits_url, comments_url, issue_comment_url, contents_url, compare_url, merges_url, archive_url, downloads_url, issues_url, pulls_url, milestones_url, notifications_url, labels_url, releases_url, deployments_url, created_at, updated_at, pushed_at, git_url, ssh_url, clone_url, svn_url, homepage, size, stargazers_count, watchers_count, language, has_issues, has_downloads, has_wiki, has_pages, forks_count, mirror_url, open_issues_count, forks, open_issues, watchers, default_branch}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of Repos.

Jun
Jun
~ 9 years ago

I got all the code running, but found an error from the chrome console. Does anyone have any idea why this can be happening?

Uncaught (in promise) Error: Objects are not valid as a React child (found: object with keys {id, name, full_name, owner, private, html_url, description, fork, url, forks_url, keys_url, collaborators_url, teams_url, hooks_url, issue_events_url, events_url, assignees_url, branches_url, tags_url, blobs_url, git_tags_url, git_refs_url, trees_url, statuses_url, languages_url, stargazers_url, contributors_url, subscribers_url, subscription_url, commits_url, git_commits_url, comments_url, issue_comment_url, contents_url, compare_url, merges_url, archive_url, downloads_url, issues_url, pulls_url, milestones_url, notifications_url, labels_url, releases_url, deployments_url, created_at, updated_at, pushed_at, git_url, ssh_url, clone_url, svn_url, homepage, size, stargazers_count, watchers_count, language, has_issues, has_downloads, has_wiki, has_pages, forks_count, mirror_url, open_issues_count, forks, open_issues, watchers, default_branch}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of Repos.

Jun
Jun
~ 9 years ago

Got it. This error is caused by the line "REPOS: {this.props.repos}", which I did not delete...

Bharat Soni
Bharat Soni
~ 9 years ago

I'm getting react-router error,

the `History` mixin is deprecated, please access `context.router` with your own `contextTypes`.

I know it is something to do with new react-router, but i couldn't fix it. Could you please guide...