Building a React.js App: State, Props, and Thinking in React

Share this video with your friends

Send Tweet

In this video, we’ll build out the skeleton of our main React.js components. We’ll talk about how to think in terms of components as well as learn about state and props.

Marcelo
Marcelo
~ 9 years ago

What you did to change the color of your browser console ?

Marcelo
Marcelo
~ 9 years ago

Why am I getting this error in the console: Uncaught TypeError: this.getParams is not a function

Tyler McGinnis
Tyler McGinnis(instructor)
~ 9 years ago

https://chrome.google.com/webstore/detail/brogrammer-dev-tools-them/alolpfkmcjdkieibielpffiehpobafae

xmen4u
xmen4u
~ 9 years ago

In Profile.js , it should be "bio={this.state.bio.name}/>" , instead of "bio={this.state.bio}/>". Without this, React yells a warning:

"Warning: Any use of a keyed object should be wrapped in React.addons.createFragment(object) before being passed as a child." and it's right! as it doesn't know what to property from Object / Array to print

Tyler McGinnis
Tyler McGinnis(instructor)
~ 9 years ago

I commented on this in the video. We'll fix it in a future video. We only do it to show the data is there initially.

Jason
Jason
~ 9 years ago

Why am I getting this error in the console: Uncaught TypeError: this.getParams is not a function

Use this.props.params.username if using react-router 1.0.0-rc1

egghead eggo
egghead eggo
~ 9 years ago

The lesson video has been updated!

Mark
Mark
~ 9 years ago

I'm stuck with when trying to load the profile (video 3:15), results in the console error: bundle.js:829 Warning: [react-router] Location "//profile/blah" did not match any routes

The completed github code seems to run fine, but the syntax is completely different, and it's the completed code, making it very difficult / impossible to figure out why my uncompleted code isn't running.

Tyler McGinnis
Tyler McGinnis(instructor)
~ 9 years ago

Have you checked the specific branch for this video? https://github.com/tylermcginnis/github-notetaker-egghead/tree/03-react-router Might be easier to compare to yours rather than the final version.

Aline Bastos
Aline Bastos
~ 9 years ago

Mark, did you resolved this issue? I'm getting the same error..

Harini Janakiraman
Harini Janakiraman
~ 9 years ago

Mark & Aline, I figured out that it works if you have "//" added to your react-route, like below

<Route path="//profile/:username" component={Profile} />

Carmen
Carmen
~ 8 years ago

I had the same error. Your solution worked well however, I don't quite understand why. Any ideas?

I just started this course so I'm using the latest as today. I'm using "react-router": "^2.4.1" Thanks

Sebastian Belmar
Sebastian Belmar
~ 8 years ago

when you are typing "/profile/whatever", notice your have a hashed string after "index.html#/" before "/profile/whatever", it looks something like this "index.html#/?sf_31dsfds/profile/whatever", that hashed string in the middle now does not represent anything, so the browser is looking for a url called "index.html#//profile/whatever" but you don't have it, that's why you are getting this error. So when you testing route, delete the hashed part.

Owen
Owen
~ 8 years ago

Hi, I recently started this series and am using the most-recent react router 2.6.1. I have been stuck for some time with a similar error "Warning: [react-router] Location "/Users/owen/Dev/github-notetaker/public/index.html#/profile/someone" did not match any routes. I have tried all the suggested solutions but am stuck now. I have changes my routes.js file to :

var Main = require('../components/Main');
var Home = require('../components/Home');
var Profile = require('../components/Profile');
var Router = require('react-router');
var Route = Router.Route;
var IndexRoute = Router.IndexRoute;

module.exports = (
    <Route path="/" component={Main}>
        <Route path="//profile/:username" component={Profile}/>
        <IndexRoute component={Home}/>
    </Route>
);```

I am still getting 'Warning: [react-router] Location "/Users/owen/Dev/github-notetaker/public/index.html#/profile/someone" did not match any routes'   though and don't know what else to try.  Any idea what is wrong here ? 
Steven
Steven
~ 8 years ago

At 41 seconds you require "react-router" and say we'll need it later? Maybe I'm missing something obvious but where later is this actually required? Do we need this line at all? Thanks for the great series!