Combine Child Nodes with JSX

Nov 19, 2020 • 5 Minute Read

Introduction

JSX (JavaScript XML) is most suitable for writing JavaScript within the HTML mark-up. It is a primary option to use with React because of its way of presenting DOM elements and maintainability. While developing with React, it’s essential to use the combination of the parent-child element or a group of elements rendered dynamically based on the supportive conditions so that it can be sufficient to manage the DOM elements.

The JSX can render child elements within the parent element separately, and you will learn the same approach in this guide.

Creating the Child JSX Elements

Before rendering or combining various child JSX elements, you need to create them either within the render() or by creating a separate function and returning the desired set of JSX mark-up. For combining the child JSX elements, you need to make sure that it fits into the same supported element where you want to render it.

For example, you want to render multiple <Button> as a separate JSX element. Thus, you will need to have a <ButtonToolbar> kind of container where you can render those child JSX buttons. Create one function which returns the list if <li> elements as given below.

          renderList1 = () => {
    return (
      <>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
      </>
    );
};
    

The above function returns the fragment of five different <li> items, which can be rendered only within the <ul> element as it only supports <li> as a child element.

Create another function that returns a fragment of five more lists of <li> elements.

          renderList2 = () => {
    return (
      <>
        <li>Item 6</li>
        <li>Item 7</li>
        <li>Item 8</li>
        <li>Item 9</li>
        <li>Item 10</li>
      </>
    );
};
    

Both the function renderList1() and renderList2() are almost the same except their values; now, it’s a challenge to render the list of <li> elements into a single <ul> element by combining them.

Combining the Child JSX Nodes with the Parent Nodes

In the previous section, there are two separate functions created, which returns the set of <li> elements, but they should get rendered within the single <ul> element.

The JSX comes with much more flexibility than you can even put into any function in line with the HTML mark-up, and the respective function’s content will get rendered as it returns. Below is one of the simplest pieces of code that combines the two different JSX code sets into one and renders its respective content.

          render() {
    return (
      <>
        <div>
          <ul>
            {this.renderList1()}
            {this.renderList2()}
          </ul>
        </div>
      </>
    );
}
    

Inside the <ul> element, if two different functions get used and wrapped with the curly braces { } it means the content of the function/expression will get executed, and elements will get rendered wherever they're referenced.

Below is the complete code of the example.

          import React, { Component } from "react";

export class Example1 extends Component {
    renderList1 = () => {
        return (
            <>
                <li>Item 1</li>
                <li>Item 2</li>
                <li>Item 3</li>
                <li>Item 4</li>
                <li>Item 5</li>
            </>
        );
    };

    renderList2 = () => {
        return (
            <>
                <li>Item 6</li>
                <li>Item 7</li>
                <li>Item 8</li>
                <li>Item 9</li>
                <li>Item 10</li>
            </>
        );
    };

    render() {
        return (
            <>
                <div>
                    <ul>
                        {this.renderList1()}
                        {this.renderList2()}
                    </ul>
                </div>
            </>
        );
    }
}

export default Example1;
    

Once you run the above example, you can see that the set of JSX elements coming from a collection of the function gets rendered inside the single<ul> element as an unordered list.

You can try creating the function and returning the set of JSX elements. By using the functional rendering approach, code will be easy to manage and pretty effective to combine child nodes using the JSX syntax.

Conclusion

JSX is always a handy option for React.js developers because of JavaScript within the HTML mark-up, and rendering the parent-child JSX elements is an easier way than ever before because of its straight-forward syntax.

You can try combining the parent and child nodes and render the child nodes conditionally; this is how you can implement JSX effectively with your React app.