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

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.

Related Posts:

• React Component Props example
• React State example
• React Note Application – React props and state example

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:

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

React Stateless Functional Components example

#react #stateless #components