Functional Component in React

The functional component in React will teach y’ all about how functional components are created. Where these functional components are useful.

Functional Component in React

Functional Component in React

Some key features of Functional components

  • These look like javascript functions
  • We have function definition and they are exported
  • Function component without JSX then no need to import React from “react”;
  • If you are using JSX code then we need to import JSX code.
  • Most probably we use JSX hence we include import React from “react”; statement
  • The functional component uses props which are useful for the change the component JSX dynamically.
  • These functional components are easy to read
  • Easily can be tested
  • These components do not contain state but it uses props which makes component reusable.
  • It is not always recommended of using functional components it depends on the requirement like if you want to maintain state then the functional component is not usable.

Now we will see the example of creating a functional component

Create a functional component /src/components/Functional.js

In the above code, we can find

  • We have one import statement which imports react why we need to import react because we are using JSX
  • “Functional” is a functional component name which has a parameter called “props” which contains property information of the component
  • It has a return statement which returns JSX to where the functional component is called.

Now create functional component to be called as it is created

let add the functional component at /src/App.js

  • ┬áThe statement import Functional from “./components/Functional” says that we are importing our newly created functional component.
  • <Functional name=”Functional”/> statement says that we have added the created functional component with property name=”Functional”
  • <Functional name=”Functional”/> as the statement executes it makes call to the Functional component.

The output will be printed as follow.

Hey I am Functional Component

Leave a Reply

Your email address will not be published. Required fields are marked *