Functional component in React JS

Functional components are JavaScript functions that accept props as an argument and return React elements. The props are optional. You first of all look at the simplest example of functional component.

Example:

import React from 'react'

const MyFunComponent = () => {
  return (
    <div>
      <h2>I am Functional component</h2>
    </div>
  )
}

export default MyFunComponent

In this example, JavaScript function returns React element using JSX. Note that return statement must return a single React element; although the element may have any number of child React elements. In the example, the component returns 'div' element which has 'h2' as child element. We have used arrow function to represent Functional component; we can also use function declaration for the same as given below.

import React from 'react'

function MyFunComponent() {
  return (
    <div>
      <h2>I am Functional component</h2>
    </div>
  )
}

export default MyFunComponent

Reusable: 

As a component is a reusable piece of code, we can use it one or more times in any other component. In the below example, we use MyFunComponent component inside App component. Note that we have used import statement to use MyFunComponent component inside App component.

import React from "react";
import MyFunComponent from "./MyFunComponent";
const App = () => {
  return (
    <div>
      <h1>Hello React App</h1>
      <MyFunComponent />
      <MyFunComponent />
    </div>
  );
};

export default App;

Props:

Till now, we have used simple examples of functional component. Now we will use props in the component. Props is used to pass read-only data from one component to another component. It means that props data cannot be modified in the component. We can pass several data to a component via props. In fact, props is an object that holds several key-value pairs data. Passing data from one component to another component is based on parent and child relationship. To look at how one function component is used inside another function component, click this page link.

In case of functional component, props is passed as an argument of the functional component. Look at the following example.

Component receiving props:

import React from 'react'

function MyFunComponent(props) {
  return (
    <div>
      <h2>I am Functional component which receives name: {props.name}</h2>
      <h2>I am Functional component which receives age: {props.age}</h2>
    </div>
  )
}

export default MyFunComponent

Component passing props:

import React from "react";
import MyFunComponent from "./MyFunComponent";
const App = () => {
  return (
    <div>
      <h1>Hello React App</h1>
      <MyFunComponent name='appliedk'  age='20'/>
    </div>
  );
};

export default App;

How to declare and use variables in function component:

In a function component in React, you can declare variables using the 'const' or 'let' keywords within the function body, just like in regular JavaScript. Once declared, these variables can be used within the function component. Here's an example:

import React from 'react';

const MyComponent = () => {
  // Declare a variable
  const name = 'John';

  // Use the variable in JSX
  return (
    <div>
      <p>Hello, {name}!</p>
    </div>
  );
};

export default MyComponent;

In this example:

• We declare a variable named 'name' using the 'const' keyword within the 'MyComponent' function component.
• We use the 'name' variable directly within the JSX markup, using curly braces '{}' to embed the JavaScript expression.

Variables declared within a function component are scoped to that component and cannot be accessed outside of it. They are typically used to store values that are specific to the component and are not shared with other components.

Event Handler in a function component

In a function component in React, you can declare event handlers as regular functions within the component body. Once declared, you can pass these event handler functions as props to JSX elements to handle specific events. Here's an example:

import React from 'react';

const MyComponent = () => {
  // Event handler function
  const handleClick = () => {
    console.log('Button clicked!');
  };

  // Use the event handler function in JSX
  return (
    <div>
      {/* Button with onClick event handler */}
      <button onClick={handleClick}>Click me</button>
    </div>
  );
};

export default MyComponent; 

In this example:

• We declare an event handler function named 'handleClick' using a regular function syntax within the 'MyComponent' function component.
• We use the 'handleClick' function as the value of the 'onClick' attribute in the JSX button element. This means that when the button is clicked, the 'handleClick' function will be called.
• Inside the 'handleClick' function, we log a message to the console indicating that the button was clicked.

Event handler functions in function components work similarly to event handler methods in class components. They are invoked when the corresponding event occurs, allowing you to perform actions or update state in response to user interactions.