What is Functional Component in React

A Functional Component is basically a JavaScript/ES6 function that returns a React element (JSX). This is a special and valid syntax extension for React which is called JSX. We keep HTML, CSS, and JavaScript code in separate files.

React is an open-source, front-end, JavaScript library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications.

React Function Component Example

import React from 'react';
 
function App() {
  const greeting = 'Hello Function Component!';
  return <h1>{greeting}</h1>;
{greeting}
; } 
export default App;

That’s already the essential React Function Component Syntax. The definition of the component happens with just a JavaScript Function which has to return JSX — React syntax for defining a mix of HTML and JavaScript whereas JavaScript is used with curly braces within the HTML. In our case, we render a variable called a greeting, which is defined in the component’s function body and is returned as an HTML headline in JSX.

React Function Component: Props

Let’s learn about a React Function Component with props. In React, props are used to pass information from component to component. If you don’t know about props in React, cross-read the linked article. Essentially props in React are always passed down the component tree:

import React from 'react';
 
function App() {
  const greeting = 'Hello Function Component!';
  return <Headline value=>{greeting}/>;
}
function Headline(props){
return<h1>{props.value}</h1>;
}
export default App;

React Arrow Function Component

With the introduction of JavaScript ES6, new coding concepts were introduced to JavaScript and therefore to React. For instance, a JavaScript function can be expressed as lambda (arrow function). That’s why a Function Component is sometimes called Arrow Function Component (or maybe also Lambda Function Component). Let’s see our refactored React Component with an Arrow Function:

import React from 'react';
 
const App = () => {
  const greeting = 'Hello Function Component!';
  return <Headline value=>{greeting}/>;;
};
const Headline = ({ value }) => {
  return <h1>{value}</h1>;
};
export default App;

React Function Component: State

React Hooks made it possible to use state (and side-effects) in Function Components. Finally, we can create a React Function Component with the state! Let’s say we moved all logic to our other Function Component and don’t pass any props to it:

import React,{ useState } from 'react';
 const App = () => {
 return <Headline />;
};
const Headline = () => {
 const [greeting, setGreeting] = useState(
 'Hello Function Component!'
 );
 return <h1>{greeting}</h1>;
};
export default App;

React Function Component: Event Handler

we have used an arrow function to inline the event handler for our input field. What about extracting it as a standalone function inside the component? It would become a named function then:

import React, { useState } from 'react';
const App = () => {
 return <Headline />;
};
const Headline = () => {
const [greeting, setGreeting] = useState(
   'Hello Function Component!'
);
 const handleChange = event => setGreeting(event.target.value);
 return (
   <div>
     <h1>{greeting}</h1>
     <input type="text" value={greeting} onChange={handleChange} />
   </div>
 );
};
export default App;