The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

Set Properties on React Components

Set Properties on React Components

2:29
This lesson will teach you the basics of setting properties (props) in your React components. As stated in [Thinking in React](https://facebook.github.io/react/docs/thinking-in-react.html), props are how we pass data around in React. We will take a look at what `propTypes` and `defaultProps` do for us in React.
Watch this lesson now
Avatar
egghead.io

This lesson will teach you the basics of setting properties in your React components.

Avatar
Faria

Can propTypes be used to validate the allowed range of values for that prop? For example, a prop that must be an integer, and should only take on values in the range 1 through 6?

In reply to egghead.io
Avatar
Joseph

You could do something like this:
React.PropTypes.oneOf([1,2,3,4,5,6])

Or you could create a custom validator: https://egghead.io/lessons/react-custom-proptype-validation

In reply to Faria
Avatar
Faria

Thanks, the 'oneOf' is what I was looking for.

In reply to Joseph
Avatar
Rick

The HTML code for this lesson does not have a tag to include JSXTransformer.js. That was included in the preceding lessons, and I had to add it to get this lesson to work on my machine. Otherwise I just get a blank screen in the browser.

However, I see that on jsbin.com your code for this lesson is working just fine without including JSXTransformer.js. Why do I need to include JSXTransformer.js but you don't?

Avatar
leonardo

I cant see any warning when a field is required and i have the same code as the video, why?

Avatar
amitgaur

What version of react are you using? I believe its not required in the newer versions of react.

In reply to Rick
Avatar
Evgeny

I cant see any warning when a field is required and i have the same code as the video, why?

I have the same issue. Having looked on StackOverflow, the reason seems to be that only the development version of React shows the warnings for isRequired violations. The JSbin for this tutorial uses the production version- react.min.js, instead of the development version- react.js.

So, switch this line:

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.2/react.min.js"></script>

For this line:

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.2/react.js"></script>
In reply to leonardo
Avatar

I was pretty confused following along with this lesson having started with the first tutorial video in this series. That video has you set up a React environment and in the main.js file of that app is the line:

ReactDOM.render(, document.getElementById('app'));

That line is apparently at odds with the ReactDOM.render line in the tutorial above. This caused my webpage to show nothing at all.

Unless I missed something in the tutorials after the first one, maybe you guys should make it more clear what to do. But again, I may have missed that.

Avatar
Joseph

Good catch. I'll see about updating this lesson, I believe it's the only one that deviates from that pattern.
main.js in this case should simply be:

import App from './App';
In reply to
Avatar
Rajitha

How are you getting the auto completion from reactTypes?

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?