How to call function inside render in ReactJS ?
In React JS, the render method is a fundamental part of a component’s lifecycle. It is responsible for rendering the component’s JSX markup onto the DOM. While the render method itself should primarily handle rendering JSX, there are scenarios where you may need to call a function inside the render method. But it is not a good practice and may have some side effects instead you can call the functions in the lifecycle methods.
Prerequisites
Approach
To call function inside render in React JS we have to use the React Class Component instead of Functional Components as the render is only used in Class-based components. We can use the bind method to bind the defined function in the class.
Steps to Create React Application
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
Project Structure
It will look like the following-
Steps to install external libraries: Run this command in the terminal
npm i @mui/material @emotion/styled
Dependencies list in package.json file:
{
"dependencies": {
"@emotion/styled": "^11.11.0",
"@mui/material": "^5.14.14",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router": "^6.17.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}
}
Example: We are making a class based component i.e RenderFunction. In this component, we will input two values and populate its sum in the TextField. This sum is calculated using getSum function that is called from render.
Javascript
// Filename - App.js import React from "react" ; import TextField from "@mui/material/TextField" ; class RenderFunction extends React.Component { constructor() { super (); this .state = { answer: "Answer" , }; this .getSum = this .getSum.bind( this ); } getSum() { let x = parseInt( document.getElementById( "elementA" ).value ); let y = parseInt( document.getElementById( "elementB" ).value ); console.log(x + y); this .setState({ answer: (x ? x : 0) + (y ? y : 0), }); } render() { return ( <center> <h1> We will be calling sum function from render </h1> <div> <TextField id= "elementA" variant= "outlined" /> <TextField id= "elementB" variant= "outlined" /> <br></br> <br></br> <button onClick={ this .getSum} className= "btn btn-primary" > Get Sum </button> <br></br> <br></br> <TextField id= "elementC" disabled variant= "outlined" value={ this .state.answer} /> </div> </center> ); } } export default function App() { return ( <div className= "App" > <RenderFunction /> </div> ); } |
Step to Run Application: Run the application from the root directory of the project, using the following command
npm start
Output:
Example 2: We will toggle the background color of the div by calling a function from render.
Javascript
import React from "react" ; import TextField from '@mui/material/TextField' ; class RenderFunction2 extends React.Component { constructor() { super (); this .state = { bool: true , bgColor: 'green' } this .getBackgroundColor = this .getBackgroundColor.bind( this ) } getBackgroundColor() { console.log( "hihi" ) if ( this .state.bool == true ) { this .setState({ bool: false , bgColor: 'red' }) } else { this .setState( { bool: true , bgColor: 'green' } ) } } render() { return ( <center> <div style={{ backgroundColor: this .state.bgColor }}> {console.log( this .getBackgroundColor)} <h1 style={{ color: 'white' }}> Hi Geek!! </h1> </div> <br></br> <br></br> <button onClick={ this .getBackgroundColor} className= "btn btn-danger" > Change backgroundColor </button> </center> ) } } export default function App() { return ( <div className= "App" > <RenderFunction2 /> </div> ); } |
Output:
Contact Us