Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Creating a Stateless Functional Component in React

    Josh BlackJosh Black

    Most of the components that you write will be stateless, meaning that they take in props and return what you want to be displayed. In React 0.14, a simpler syntax for writing these kinds of components was introduced, and we began calling these components "stateless functional components". In this lesson, let's take a look at how to define a stateless function component, and how to integrate useful React features like Prop Type validation while using this new component syntax.

    reactReact
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    00:00 A common way to build components in React is to extend off of the React.Component subclass. In our case, I have this component called app that's rendering a component called title, and passing in a prop called value.

    00:17 Title is just a component that returns an H1 tag, and just passes in the value prop in as its content. This whole thing is being rendered using React DOM's render method. We're just going to pass in that app component that I had defined up above.

    00:34 We're going to target the ID of root that's just in my HTML document. One thing we might notice after we write out more and more React components is that most of our components will actually be stateless.

    00:48 This just means that we'll have a lot more components that might look like this title component up above, where it will take in some kind of props, and then the component will choose how it wants to be displayed.

    01:00 React introduced a simpler syntax for these kinds of components, calling them stateless functional components. That functional bit means that our components are defined as just a function. In our case, we can change this title component now, and turn it into an arrow function expression.

    01:25 This function is just going to take in props as an argument. We can actually have it return the same thing in the return statement in our original title render method. We can just go and have the H1 tag. Instead of doing this.props.value, now we'll do props.value, and we're good.

    01:50 Let's go and change the value here for the value prop, run the example, and we can see that it works exactly the same as that original title component. The stateless bit now in that whole stateless functional components phrase just means that we lose access now to all of the life cycle methods that we're used to using while extending off of the React.Component subclass.

    02:16 The most important one is that we no longer can use this.setstate. As a result of this, our components are now just this result of the input props that we actually provide them. However, we still have access to things like prop type validation, and also default props, but specifying the members on the title function itself.

    02:42 Here, I can just add title.proptypes, and we can go and validate the value prop type the same way we would in a typical React class component. We can do the same thing now with default props by doing title.defaultprops, and then giving a default value now for the value prop.

    03:05 Now we have a complete example of a stateless functional component in React.

    Discuss

    Discuss