Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Create stateless React components using TypeScript


    You can create a stateless React component in TypeScript by just creating a function.

    But if you want to create high quality idiomatic React + TypeScript components you should use the React.StatelessComponent interface. This is demonstrated in the video.



    Become a Member to view code

    You must be a Pro 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
    orLog In




    Here, I have a simple React TypeScript application that renders the div, "Hello world," to the DOM using React and ReactDOM. We can easily move this div into a stateless component called "app" by creating a function, app, that returns this element.

    Of course, one big advantage of components is that you get to use props to change the component behavior. For example, we can take the message as a property by adding it to the function arguments, and then, using it inside the function body.

    Now, we'll get to pass in the message as a property the component. You can see that it still behaves the same, but now, we can also control the rendering with the passed-in properties.

    Although simple functions work fine for simple stateless components, if you want to create high quality types of components, it is recommended that you annotate your component as a React stateless component.

    This interface takes a generic argument that allows you to easily provide type annotations for the component props. This annotation also opens up other features, like the ability to specify the display name, which will be used as the name for the component in React dev tools.