14. What is React Functional components (Stateless)

We are already know about class based components. 

This is based on functional component. We will see when to use class based component and when to use functional components.

What is Functional Stateless Component?

A functional component is typical react component that does not manage any state. This is also called as stateless component.

There are no constructors needed.

No classes to initialize

These functions simply take props as an input and return JSX as an output.

Note: The functional component no need to maintain any state. They will allow for props.

How to create Functional Component?

We can still pass some information whether its static data to show to the screen.

We just need to pass in the prop like we did for class based components.

For e.g We can pass name, age arguments into the ReactDOM.render and then we can access the name prop putting it right here inside of tag.

Now we have stateless functional component. do not have access to this.

we can pass the props as mentioned below.

const User = (props) => {

}

In function we can use props.name. 

Note: In class based components we can use this.props

We can't use state inside of our stateless functional component.

We can indeed use props & this makes very easy.

It is faster than class based components.

 

    

 const User = (props) => {

        return(

            <div>

                <p>Name: {props.name}</p>

                <p>Age: {props.age}</p>

            </div>

        );

    };

    const root = document.getElementById('app');

    ReactDOM.render(<User name="Sleepycoder" age="20" />, root);