Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 1083 of the free egghead.io lessons, plus get React content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Set Properties on React Components

2:29 React lesson by

This lesson will teach you the basics of setting properties (props) in your React components. As stated in Thinking in React, props are how we pass data around in React. We will take a look at what propTypes and defaultProps do for us in React.

Get the Code Now
click to level up

egghead.io comment guidelines

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?

We can pass data into our components by using what's called props. Here, I've created a prop called txt. This looks a lot like passing an attribute into an html element. I'm going to set that to a string of, This is the prop text.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <App txt="this is the prop text" />
  document.getElementById('root');
);

In our component, we can access our props by interpolating with curly brackets, this.props, and then, the name of the prop that we're looking for. In our case, it's txt.

App.js

import React from 'react';

class App extends React.Component {
  render(){
    return <h1>{this.props.txt}</h1>
  }
}
export default App

Save that and we can see, This is the prop text. Now, outside of JSX, we don't need to interpolate that, so, I can say, let txt = this.props.txt, and then in our JSX, I can just use that variable name txt.

class App extends React.Component {
  render(){
    let txt = this.props.txt
    return <h1>{txt}</h1>
  }
}

Just so we can see that change in the browser, I'm going to update our value to, This is the prop value, and we can see that there in our browser. Now, we can define the properties that we're going to be looking for in our component by adding a property to our component called PropTypes.

Browser

this is the prop value

This is going to be an object where each key is the name of the property, and each key's value is the type of value that we're looking for. If we're txt, I can say I'm looking for React.PropTypes.string. I'm going to create one more here which can be called cat. I'm going to say React.PropTypes.number is what we're looking for. In this case, we're looking for a number. I can save that. Everything's going to work just fine.

App.js

class App extends React.Component { ... }

App.PropTypes = {
  txt: React.PropTypes.string,
  cat: React.PropTypes.number
}

However, on each of these PropTypes, we can add an isRequired to it. When I save that, everything's going to work fine, but we can see here in the console that the prop cat is marked as required in 'App', but its value is 'undefined'.

isRequired

If I jump back over to our component usage, and say, cat equals, we'll set that to five, everything's working again. We're not getting that error.

index.js

ReactDOM.render(
  <App cat={5} txt="this is the prop value" />
  document.getElementById('root')
);

We can also set a series of default properties by adding a property to our component called defaultProps.

Again, this is going to be an object where each key is the property. I'm going to set our default for txt to, This is the default text. I'm going to save that. What we're going to see is that the value that was passed into our component actually overwrites the default.

App.js

class App extends React.Component { ... }

App.PropTypes = { ... }

App.defaultProps = {
  txt: "this is the default txt"
}

Once I clear that out, we get our, This is the default text, which is the default property that we set for our component.



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