⚠️ This lesson is retired and might contain outdated information.

Set Properties on React Components

Joe Maddalone
InstructorJoe Maddalone
Share this video with your friends

Social Share Links

Send Tweet
Published 10 years ago
Updated 2 years ago

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.

[00:00] We can pass data into our components by using what's called props. Here, I've created a prop called text. 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."

[00:18] 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. 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 text equal is props.txt, and then in our JSX, I can just use that variable name txt.

[00:48] 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.

[01:05] 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 text, 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.

[01:29] 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.

[01:45] 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. We can also set a series of default properties by adding a property to our component called defaultProps.

[02:03] Again, this is going to be an object where each key is the property. I'm going to set our default for text 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.

[02:20] Once I clear that out, we get our, "This is the default text," which is the default property that we set for our component.

Rick
Rick
~ 9 years ago

The HTML code for this lesson does not have a <script> 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?

leonardo
leonardo
~ 9 years ago

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

amitgaur
amitgaur
~ 9 years ago

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

Evgeny Likhoded
Evgeny Likhoded
~ 9 years ago

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>
~ 8 years ago

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(<App />, 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.

Joe Maddalone
Joe Maddaloneinstructor
~ 8 years ago

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';
Rajitha
Rajitha
~ 8 years ago

How are you getting the auto completion from reactTypes?

Andy
Andy
~ 6 years ago

For anyone else getting a fatal error from propTypes, see this post https://stackoverflow.com/questions/43302963/how-to-fix-react-15-5-3-proptypes-deprecated-warning-when-using-create-react-app

Basically deprecation.

Dmitry Guryev
Dmitry Guryev
~ 6 years ago

React.PropTypes are deprecated in React 16, this example doesn't work.

Fix: import PropTypes from 'prop-types'; ... txt: PropTypes.string

etc.

vineet
vineet
~ 6 years ago

React.PropTypes is deprectated.

After react v15.5, instead of accessing PropTypes from main React object ( React.PropTypes ), install prop-types package and import it in your app.

https://reactjs.org/blog/2017/04/07/react-v15.5.0.html#migrating-from-react.proptypes

Mariusz
Mariusz
~ 6 years ago

Worth noting that React.PropTypes have now been removed from React core, so you need to install them as a separate package that doesn't come with create-react-app. The new workflow requires installing PropTypes package with:

$ npm i --save prop-types

And then importing PropTypes with import PropTypes from 'prop-types' and using PropTypes instead of React.PropTypes in your code.

Vishwas Chouhan
Vishwas Chouhan
~ 6 years ago

React.PropTypes.string is throwing an error. TypeError: Cannot read property 'string' of undefined

Vishwas Chouhan
Vishwas Chouhan
~ 6 years ago

@Joe, The App.propTypes and App.defaultProps does not work. Has this changed in the latest version when you use create-react-app to setup.

Kenzan
Kenzan
~ 6 years ago

Might want to update the lesson or put in a warning. I got the following warning in the console when following along. "React.PropTypes is deprecated since React 15.5.0, use the npm module prop-types instead."

isaac
isaac
~ 6 years ago

The content need to be updated as React.PropTypes is deprecated since React 15.5.0, use the npm module prop-types instead react/no-deprecated

isaac
isaac
~ 6 years ago

The updated code for App.js should be

import React from "react";
import PropTypes from "prop-types";

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

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

export default App
Philip John
Philip John
~ 6 years ago

Updated Code for App.js

import React from 'react';
import PropTypes from 'prop-types';

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

App.propTypes = {
  txt: PropTypes.string,
  cat: PropTypes.number.isRequired
};

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

export default App;
Markdown supported.
Become a member to join the discussionEnroll Today