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

• React JS
• React JS Class Components

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: