React Stateless Functional Components example

#react #stateless #functional

https://grokonez.com/frontend/react/react-stateless-functional-components-example

We have known how to define a React Component in the post React Components example. There is a simpler way to do this which is called stateless functional components. Remember that we can only use this method for components that don't have state.

I. How to

With component that we created from the class:

class MyComponent extends React.Component {
    render() {
        return (
            <div>
                <h2>{this.props.abc}</h2>
                <h4>{this.props.xyz}</h4>
            </div>
        );
    }
}

We can define it in another way (stateless functional component way):

const Header = (props) => {
    return (
        <div>
            <h2>{props.abc}</h2>
            <h4>{props.xyz}</h4>
        </div>
    );
};

We can see that the stateless component is just a function. There is no this keyword.

II. Practice

1. Overview

We will build a React Note Application like the post: React Note Application – React props and state example using Stateless Functional Components wherever we can: