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. In this article, we will explore how to add a function in JSX.
Creating 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: It will look like the following.
Now let’s see how to add a function with JSX.
Example 1: In this example, we will consider an example to demonstrate how can a function be added to our application. Now inside the component’s directory, we will create a display.js file that will contain the display function that is going to be added to the application.
Javascript
import React from "react";// This is the function that will be added to the applicationfunction Display() { return <h1>GeeksForGeeks</h1>;}export default Display; |
Now, the final step is to incorporate our function in the application. This can be done by importing the function into App.js file and using the name of the function as a custom JSX tag.
Javascript
import "./styles.css";// Importing the functionimport Display from "./components/display";export default function App() { return ( <div className="App"> {/* Creating custom JSX tag to return the function */} <Display></Display> </div> );} |
Output: Thus, we can see that it is really simple to add functions to our JSX code. The example provided was quite simple but complex rendering and desired calculations can also be done inside functions and then can be used in our application code.
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.
Javascript
import React from "react";// The contents of the header can // be modified in this functionfunction Display(props) { return <h1>{props.name}</h1>;}export default Display; |
Now, We will now incorporate the function in the App.js file as we did in the previous example.
Javascript
import "./styles.css";// Importing the functionimport Display from "./components/display.js";export default function App() { return ( <div className="App"> {/*Customised JSX tag with different inputs*/} <Display name="Geeks"></Display> <Display name="For"></Display> <Display name="Geeks"></Display> </div> );} |
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:
References:
- https://www.geeksforgeeks.org/reactjs-functional-components/
- https://reactjs.org/docs/faq-functions.html
