How to add a function in JSX ?

JSX is a syntax extension for JavaScript that allows us to write HTML-like code within our JavaScript files. It is commonly used in React applications to define the structure and layout of components. While JSX primarily focuses on rendering components and displaying data, it also provides the flexibility to include functions within the JSX code.

Prerequisites:

• NodeJS: JavaScript runtime environment.
• NPM: Package manager for JavaScript.
• ReactJS: JavaScript library for building user interfaces.
• JSX: Syntax extension for JavaScript.

Steps to Create React Application And Installing Module:

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd foldername

Step 3: After setting up react environment on your system, we can start by creating an App.js file and create a directory by the name of components in which we will write our desired function.

Project Structure:

👁 Image

The updated dependencies in package.json file will look like.

 "dependencies": {
 "react": "^18.2.0",
 "react-dom": "^18.2.0",
 "react-scripts": "5.0.1",
 "web-vitals": "^2.1.4",
 }

Example 1: In this example, we will demonstrate how to add a function in our application.

Output: Thus, we can see that it is really simple to add functions to our JSX code.

👁 Image

Example 2: Now in this example, we will create display.js file with a change. This time we will be able to change the contents of the header from App.js file.

From the code, we can predict the output now. Note that you can render your customized output by just changing the name property in the tag.

Output:

👁 Image