Return a Variable in the Render Function in React

Using JSX, you can create a function and return a set of JSX elements to a variable, and that variable used is to render the elements inside the `render()` function in React.

Nov 10, 2020 • 5 Minute Read

Subscribe to the newsletter

Introduction

JSX stands for JavaScript XML, a coding standard that allows you to use JavaScript expressions and other HTML features inline. Using JSX, you can create a function and return a set of JSX elements to a variable, and that variable used is to render the elements inside the render() function in React.

This guide will help you learn how to return JSX to a variable and render JSX markups to the DOM.

Return Static JSX Content to a Variable

JSX is used along with React to remove loosely coupled parts of a component, like HTML, CSS, and JavaScript, and get them to work together in a single file called a component. Its syntax can be easy to write and visually compelling. Thus, the JSX elements can also get returned to the variable, and that variable can be used for rendering.

For an example demonstration, let's create a static table within a function and return it to the variable. We'll also create one static <table> inside the function.

          getTable() {
    return (
      <div>
        <table border="2">
          <tr>
            <td>Row 1 Col 1</td>
            <td>Row 1 Col 2</td>
          </tr>
          <tr>
            <td>Row 2 Col 1</td>
            <td>Row 2 Col 2</td>
          </tr>
          <tr>
            <td>Row 3 Col 1</td>
            <td>Row 3 Col 2</td>
          </tr>
        </table>
      </div>
    );
}
    

The table is created within the function and returns the set of JSX markups to the function. So once you access the function, respective JSX markups of the table will be replaced.

The next step is to call the function and assign it to the variable, as shown below.

          render() {
    // Calling function and assigned it to the variable
    const mytable = this.getTable();

    return (
      <>
        {/* rendered the JSX */}
        <div>{mytable}</div> 
      </>
    );
}
    

The functionthis.getTable() is called and it returns the complete <table> element, so once you place it inside the return(), the element will be created into the DOM.

Conditionally Rendering JSX

Both static and dynamic content can be served to the DOM. Hence, you can render dynamic content based on individual conditional operators such as the ternary operator. For example, if you want to show active or inactive logged-in user status, the status color or label may change based on the condition, such as changing to green or red.

For clearer understanding, create two functions showing the active status label and the inactive status label.

          activeContent() {
   return <label>Active</label>;
}

inActiveContent() {
   return <label>In-active</label>;
}
    

Each of the above functions returns the specific JSX element as a JSX <label> element, however, you should have some identifiers or conditions to dynamically show the status.

Create the key into the state object, as shown below.

          constructor(props) {
    super(props);
    this.state = {
      isActive: false
    };
}
    

Observe that there is a key named isActive in the component, and the same variable can be used as a condition that either can be true or false.

Now, let's call the above two functions and put their result in additional variables.

          const activeVariable = this.activeContent();
const inactiveVariable = this.inActiveContent();
    

activeVariable is used to hold the active label status, and inactiveVariable holds the inactive status label. Both can be interchangeable using the ternary operator, as shown below.

          render() {
    const activeVariable = this.activeContent();
    const inactiveVariable = this.inActiveContent();

    return (
      <>
        {this.state.isActive ? activeVariable : inactiveVariable}
      </>
    );
}
    

The above ternary condition uses this.state.isActive, and based on its value (true or false), the respective label will be rendered into the DOM. Using a variable in render() is a common approach. Most React developers use them to manage dynamic content from the function implementation, and they are easy to operate throughout the component.

Conclusion

JSX with React is not a required approach, but it can be effectively used to use JavaScript-based expressions and other features inline with HTML markup.

Returning a variable in the render function is the easiest way to manage the JSX markup, whether the content is static or dynamic. Give it a try and dig into JSX!

Learn More

Explore these React courses from Pluralsight to continue learning: