In ReactJS, 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. In this article, we’ll explore how to call a function inside the render method in ReactJS.
React is having 2 types of components, i.e, Class based Components and Functional Components, but render method is only for Class based components. So we will make a class based component and call a function in that.
Lets first create a React-app
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
Project Structure: It will look like the following-
Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.
Explanation: 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
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 + y }) } 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: Now write down the following code in the App.js file. Here, the App is our default component where we have written our code.
Explanation: 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:
