JSX expressions must have one parent element

Question

I've the following code in the editor working fine.

import React, { Component } from "react";
import { render } from "react-dom";
import "jqwidgets-scripts/jqwidgets/styles/jqx.base.css";
import JqxButton from "jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons";
import * as ReactDOM from "react-dom";
import JqxWindow from "jqwidgets-scripts/jqwidgets-react-tsx/jqxwindow";
import JqxInput from "jqwidgets-scripts/jqwidgets-react-tsx/jqxinput";

import JqxChart, {
  IChartProps
} from "jqwidgets-scripts/jqwidgets-react-tsx/jqxchart";
import JqxGrid, {
  IGridProps,
  jqx
} from "jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid";
import JqxTabs from "jqwidgets-scripts/jqwidgets-react-tsx/jqxtabs";
import JqxDropDownList, {
  IDropDownListProps
} from "jqwidgets-scripts/jqwidgets-react-tsx/jqxdropdownlist";

interface AppProps {}
interface AppState {
  name: string;
}
interface IProps extends IGridProps {
  rendertoolbar1: IGridProps["rendertoolbar"];
  dropdownlistSource: IDropDownListProps["source"];
}

class App extends Component<{}, IProps> {
  private myTabs = React.createRef<JqxTabs>();
  private gridElement = React.createRef<HTMLDivElement>();
  private gridElementTwo = React.createRef<HTMLDivElement>();
  private myGrid = React.createRef<JqxGrid>();
  private myGrid2 = React.createRef<JqxGrid>();
  private myWindow = React.createRef<JqxWindow>();
  private myWindowTWO = React.createRef<JqxWindow>();
  private date = React.createRef<JqxInput>();
  private sAndP500 = React.createRef<JqxInput>();

  constructor(props: {}) {
    super(props);
    this.saveBtn = this.saveBtn.bind(this);
    this.cancelBtn = this.cancelBtn.bind(this);
    this.saveBtntwo = this.saveBtn.bind(this);
    this.cancelBtntwo = this.cancelBtn.bind(this);

    const rendertoolbar = (toolbar: any): void => {
      const addRowClick = () => {
        //const datarow = this.generaterow();
        //this.myGrid.current!.addrow(null, datarow);
        this.myWindow.current!.open();
      };

      const addRowClickTwo = () => {
        //const datarow = this.generaterow();
        //this.myGrid.current!.addrow(null, datarow);
        this.myWindowTWO.current!.open();
      };

      ReactDOM.render(
        <div style={{ margin: "5px" }}>
          <div
            id="buttonContainer2"
            style={{ float: "left", marginLeft: "5px" }}
          >
            <JqxButton
              onClick={addRowClickTwo}
              width={125}
              value={"Add New NASDAQ"}
            />
          </div>
        </div>,
        toolbar[0]
      );
    };

    const rendertoolbar1 = (toolbar: any): void => {
      const addRowClick = () => {
        //const datarow = this.generaterow();
        //this.myGrid.current!.addrow(null, datarow);
        this.myWindow.current!.open();
      };

      const addRowClickTwo = () => {
        //const datarow = this.generaterow();
        //this.myGrid.current!.addrow(null, datarow);
        this.myWindowTWO.current!.open();
      };

      ReactDOM.render(
        <div style={{ margin: "5px" }}>
          <div id="buttonContainer1" style={{ float: "left" }}>
            <JqxButton
              onClick={addRowClick}
              width={135}
              value={"Add New Us Index"}
            />
          </div>
        </div>,
        toolbar[0]
      );
    };

    this.state = {
      rendertoolbar,
      rendertoolbar1,
      // dropdownlistSource: ["Affogato", "Americano", "Bicerin", "Breve"]
      dropdownlistSource: [
        { value: 0, label: "Affogato" },
        { value: 1, label: "Americano" },
        { value: 2, label: "Bicerin" },
        { value: 3, label: "Breve" }
      ]
      //source: new jqx.dataAdapter(source)
    };
  }
  public render() {
    return (
      <JqxTabs
        ref={this.myTabs}
        // @ts-ignore
        width={400}
        height={560}
        initTabContent={this.initWidgets}
        onSelected={this.onTabSelected}
      >
        <JqxWindow
          ref={this.myWindow}
          width={250}
          height={230}
          resizable={false}
          isModal={false}
          autoOpen={false}
          modalOpacity={"0.01"}
          position={{ x: 68, y: 368 }}
        >
          <div>Add New US Indexes</div>
          <div style={{ overflow: "hidden" }}>
            <table>
              <tbody>
                <tr>
                  <td align={"right"}>Date:</td>
                  <td align={"left"}>
                    <JqxInput ref={this.date} width={150} height={23} />
                  </td>
                </tr>
                <tr>
                  <td align={"right"}>S & P 500:</td>
                  <td align={"left"}>
                    <JqxInput ref={this.sAndP500} width={150} height={23} />
                  </td>
                </tr>
                <tr>
                  <td align={"right"}>DropDownList:</td>
                  <td align={"left"}>
                    <JqxDropDownList
                      width={100}
                      height={20}
                      source={this.state.dropdownlistSource}
                      selectedIndex={0}
                    />
                  </td>
                </tr>
                <tr>
                  <td align={"right"} />
                  <td style={{ paddingTop: "10px" }} align={"right"}>
                    <JqxButton
                      style={{ display: "inline-block", marginRight: "5px" }}
                      onClick={this.saveBtn}
                      width={50}
                    >
                      Save
                    </JqxButton>
                    <JqxButton
                      style={{ display: "inline-block", marginRight: "5px" }}
                      onClick={this.cancelBtn}
                      width={50}
                    >
                      Cancel
                    </JqxButton>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </JqxWindow>
        <JqxWindow
          ref={this.myWindowTWO}
          width={250}
          height={230}
          resizable={false}
          isModal={false}
          autoOpen={false}
          modalOpacity={"0.01"}
          position={{ x: 68, y: 368 }}
        >
          <div>Add New NASDAQ</div>
          <div style={{ overflow: "hidden" }}>
            <table>
              <tbody>
                <tr>
                  <td align={"right"}>Date:</td>
                  <td align={"left"}>
                    <JqxInput ref={this.date} width={150} height={23} />
                  </td>
                </tr>
                <tr>
                  <td align={"right"}>S & P 500:</td>
                  <td align={"left"}>
                    <JqxInput ref={this.sAndP500} width={150} height={23} />
                  </td>
                </tr>
                <tr>
                  <td align={"right"} />
                  <td style={{ paddingTop: "10px" }} align={"right"}>
                    <JqxButton
                      style={{ display: "inline-block", marginRight: "5px" }}
                      onClick={this.saveBtntwo}
                      width={50}
                    >
                      Save
                    </JqxButton>
                    <JqxButton
                      style={{ display: "inline-block", marginRight: "5px" }}
                      onClick={this.cancelBtntwo}
                      width={50}
                    >
                      Cancel
                    </JqxButton>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </JqxWindow>
        <ul>
          <li style={{ marginLeft: 30 }}>
            <div style={{ height: 20, marginTop: 5 }}>
              <div style={{ float: "left" }}>
                <img width="16" height="16" src="./../images/catalogicon.png" />
              </div>
              <div
                style={{
                  marginLeft: 4,
                  verticalAlign: "middle",
                  textAlign: "center",
                  float: "left"
                }}
              >
                US Indexes
              </div>
            </div>
          </li>
          <li>
            <div style={{ height: 20, marginTop: 5 }}>
              <div style={{ float: "left" }}>
                <img width="16" height="16" src="./../images/pieicon.png" />
              </div>
              <div
                style={{
                  marginLeft: 4,
                  verticalAlign: "middle",
                  textAlign: "center",
                  float: "left"
                }}
              >
                NASDAQ compared to S&P 500
              </div>
            </div>
          </li>
        </ul>
        <div style={{ overflow: "hidden" }}>
          <div id="jqxGrid" ref={this.gridElement} />
          <div style={{ marginTop: 10, height: "15%" }} />
        </div>
        <div style={{ overflow: "hidden" }}>
          <div id="jqxGrid2" ref={this.gridElementTwo} />
          <div style={{ marginTop: 10, height: "15%" }} />
        </div>
      </JqxTabs>
    );
  }
  private initGrid = () => {
    const source = {
      datafields: [{ name: "Date" }, { name: "S&P 500" }, { name: "NASDAQ" }],
      datatype: "csv",
      //url: './assets/nasdaq_vs_sp500.txt'
      localdata: `1/2/2014,1831.98,4143.07
1/3/2014,1831.37,4131.91
1/6/2014,1826.77,4113.68
1/7/2014,1837.88,4153.18
1/8/2014,1837.49,4165.61
1/9/2014,1838.13,4156.19
1/10/2014,1842.37,4174.67
1/13/2014,1819.2,4113.3
1/14/2014,1838.88,4183.02
1/15/2014,1848.38,4214.88
1/16/2014,1845.89,4218.69
1/17/2014,1838.7,4197.58
1/21/2014,1843.8,4225.76
1/22/2014,1844.86,4243
1/23/2014,1828.46,4218.88
1/24/2014,1790.29,4128.17
1/27/2014,1781.56,4083.61
1/28/2014,1792.5,4097.96
1/29/2014,1774.2,4051.43
1/30/2014,1794.19,4123.13
1/31/2014,1782.59,4103.88
2/3/2014,1741.89,3996.96
2/4/2014,1755.2,4031.52
2/5/2014,1751.64,4011.55
2/6/2014,1773.43,4057.12
2/7/2014,1797.02,4125.86`
    };

    const dataAdapter = new jqx.dataAdapter(source, {
      async: false,
      loadError: (xhr: any, status: any, error: any) => {
        console.log(xhr, status, error);
        //alert('Error loading "' + source.url + '" : ' + error);
      }
    });

    const columns: IGridProps["columns"] = [
      { cellsformat: "d", datafield: "Date", text: "Date", width: 250 },
      { datafield: "S&P 500", text: "S&P 500", width: 150 },
      { datafield: "NASDAQ", text: "NASDAQ" }
    ];
    const grid = (
      <JqxGrid
        ref={this.myGrid}
        width={"100%"}
        height={400}
        source={dataAdapter}
        columns={columns}
        showtoolbar={true}
        rendertoolbar={this.state.rendertoolbar1}
      />
    );
    render(grid, this.gridElement.current!);
  };
  private saveBtn(): void {
    this.myWindow.current!.hide();
  }

  private cancelBtn(): void {
    this.myWindow.current!.hide();
  }

  private initGrid2 = () => {
    const source = {
      datafields: [{ name: "Date" }, { name: "S&P 500" }, { name: "NASDAQ" }],
      datatype: "csv",
      //url: './assets/nasdaq_vs_sp500.txt'
      localdata: `1/2/2014,1831.98,4143.07
1/3/2014,1831.37,4131.91
1/6/2014,1826.77,4113.68
1/7/2014,1837.88,4153.18
1/8/2014,1837.49,4165.61
1/9/2014,1838.13,4156.19
1/10/2014,1842.37,4174.67
1/13/2014,1819.2,4113.3
1/14/2014,1838.88,4183.02
1/15/2014,1848.38,4214.88
1/16/2014,1845.89,4218.69
1/17/2014,1838.7,4197.58
1/21/2014,1843.8,4225.76
1/22/2014,1844.86,4243
1/23/2014,1828.46,4218.88
1/24/2014,1790.29,4128.17
1/27/2014,1781.56,4083.61
1/28/2014,1792.5,4097.96
1/29/2014,1774.2,4051.43
1/30/2014,1794.19,4123.13
1/31/2014,1782.59,4103.88
2/3/2014,1741.89,3996.96
2/4/2014,1755.2,4031.52
2/5/2014,1751.64,4011.55
2/6/2014,1773.43,4057.12
2/7/2014,1797.02,4125.86`
    };

    const dataAdapter = new jqx.dataAdapter(source, {
      async: false,
      loadError: (xhr: any, status: any, error: any) => {
        console.log(xhr, status, error);
        //alert('Error loading "' + source.url + '" : ' + error);
      }
    });

    const columns: IGridProps["columns"] = [
      { cellsformat: "d", datafield: "Date", text: "Date", width: 250 },
      { datafield: "S&P 500", text: "S&P 500", width: 150 },
      { datafield: "NASDAQ", text: "NASDAQ" }
    ];
    const grid = (
      <JqxGrid
        ref={this.myGrid2}
        width={"100%"}
        height={400}
        source={dataAdapter}
        columns={columns}
        showtoolbar={true}
        rendertoolbar={this.state.rendertoolbar}
      />
    );
    render(grid, this.gridElementTwo.current!);
  };

  private saveBtntwo(): void {
    this.myWindowTWO.current!.hide();
  }

  private cancelBtntwo(): void {
    this.myWindowTWO.current!.hide();
  }

  private initWidgets = (tab: any) => {
    switch (tab) {
      case 0:
        this.initGrid();
        break;
      case 1:
        this.initGrid2();
        break;
    }
  };

  private onTabSelected = (event: any) => {
    switch (event.args.item) {
      case 0:
        // this.hideButton();
        break;
      case 1:
        //  this.showButton();
        break;
    }
  };
}

render(<App />, document.getElementById("root"));

I'm trying NOT to nest <JqxWindow></JqxWindow> inside <JqxTabs></JqxTabs> since this is not a good idea as per the jQXWidgets team for the proper functioning of react app.

So, I've surrounded one <JqxTabs></JqxTabs> with the div tag and two <JqxWindow></JqxWindow> with two divs as shown in the code below and in the editor here:

 public render() {
    return (
      <div>
      <JqxTabs
        ref={this.myTabs}
        // @ts-ignore
        width={400}
        height={560}
        initTabContent={this.initWidgets}
        onSelected={this.onTabSelected}
      >

        <ul>
          <li style={{ marginLeft: 30 }}>
            <div style={{ height: 20, marginTop: 5 }}>
              <div style={{ float: "left" }}>
                <img width="16" height="16" src="./../images/catalogicon.png" />
              </div>
              <div
                style={{
                  marginLeft: 4,
                  verticalAlign: "middle",
                  textAlign: "center",
                  float: "left"
                }}
              >
                US Indexes
              </div>
            </div>
          </li>
          <li>
            <div style={{ height: 20, marginTop: 5 }}>
              <div style={{ float: "left" }}>
                <img width="16" height="16" src="./../images/pieicon.png" />
              </div>
              <div
                style={{
                  marginLeft: 4,
                  verticalAlign: "middle",
                  textAlign: "center",
                  float: "left"
                }}
              >
                NASDAQ compared to S&P 500
              </div>
            </div>
          </li>
        </ul>
        <div style={{ overflow: "hidden" }}>
          <div id="jqxGrid" ref={this.gridElement} />
          <div style={{ marginTop: 10, height: "15%" }} />
        </div>
        <div style={{ overflow: "hidden" }}>
          <div id="jqxGrid2" ref={this.gridElementTwo} />
          <div style={{ marginTop: 10, height: "15%" }} />
        </div>
      </JqxTabs>
      </div>
      <div>
       <JqxWindow
          ref={this.myWindow}
          width={250}
          height={230}
          resizable={false}
          isModal={false}
          autoOpen={false}
          modalOpacity={"0.01"}
          position={{ x: 68, y: 368 }}
        >
          <div>Add New US Indexes</div>
          <div style={{ overflow: "hidden" }}>
            <table>
              <tbody>
                <tr>
                  <td align={"right"}>Date:</td>
                  <td align={"left"}>
                    <JqxInput ref={this.date} width={150} height={23} />
                  </td>
                </tr>
                <tr>
                  <td align={"right"}>S & P 500:</td>
                  <td align={"left"}>
                    <JqxInput ref={this.sAndP500} width={150} height={23} />
                  </td>
                </tr>
                <tr>
                  <td align={"right"}>DropDownList:</td>
                  <td align={"left"}>
                    <JqxDropDownList
                      width={100}
                      height={20}
                      source={this.state.dropdownlistSource}
                      selectedIndex={0}
                    />
                  </td>
                </tr>
                <tr>
                  <td align={"right"} />
                  <td style={{ paddingTop: "10px" }} align={"right"}>
                    <JqxButton
                      style={{ display: "inline-block", marginRight: "5px" }}
                      onClick={this.saveBtn}
                      width={50}
                    >
                      Save
                    </JqxButton>
                    <JqxButton
                      style={{ display: "inline-block", marginRight: "5px" }}
                      onClick={this.cancelBtn}
                      width={50}
                    >
                      Cancel
                    </JqxButton>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </JqxWindow>
        </div>
        <div>
        <JqxWindow
          ref={this.myWindowTWO}
          width={250}
          height={230}
          resizable={false}
          isModal={false}
          autoOpen={false}
          modalOpacity={"0.01"}
          position={{ x: 68, y: 368 }}
        >
          <div>Add New NASDAQ</div>
          <div style={{ overflow: "hidden" }}>
            <table>
              <tbody>
                <tr>
                  <td align={"right"}>Date:</td>
                  <td align={"left"}>
                    <JqxInput ref={this.date} width={150} height={23} />
                  </td>
                </tr>
                <tr>
                  <td align={"right"}>S & P 500:</td>
                  <td align={"left"}>
                    <JqxInput ref={this.sAndP500} width={150} height={23} />
                  </td>
                </tr>
                <tr>
                  <td align={"right"} />
                  <td style={{ paddingTop: "10px" }} align={"right"}>
                    <JqxButton
                      style={{ display: "inline-block", marginRight: "5px" }}
                      onClick={this.saveBtntwo}
                      width={50}
                    >
                      Save
                    </JqxButton>
                    <JqxButton
                      style={{ display: "inline-block", marginRight: "5px" }}
                      onClick={this.cancelBtntwo}
                      width={50}
                    >
                      Cancel
                    </JqxButton>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </JqxWindow>
        </div>
    );
  }

And it keeps on complaining about the following :

Am I not using the divs properly?

Should I surround everything by fragment and not divs as shown here: How to fix JSX expression must have one parent element?

Whether you should wrap it into a `
` or a `` depends on whether or not you want the container to be represented in the DOM. If you use a `
` it can be given a class or id to work with. If you do not need that you can use a fragment. — trixn, Nov 13 '19 at 16:32
Also if you use a good code editor you can easily see from code highlighting or by collapsing parts of the tree if you are missing a closing tag. Your component is also very big and should be split into smaller components. — trixn, Nov 13 '19 at 16:37
Does this answer your question? [React - expressions must have one parent element?](https://stackoverflow.com/questions/48886726/react-expressions-must-have-one-parent-element) — Emile Bergeron, Nov 13 '19 at 18:18

Brian Thompson · Accepted Answer · 2019-11-13T16:33:12.300

14

You can only return one element from a react component. Wrap everything in your render with another <div> or with a react fragment <React.Fragment> (or shorthand with <>...</>). See docs on fragments.

Either a div or a fragment is acceptable, the issue is that you're returning several elements and not just one.

edited Nov 13 '19 at 16:33

answered Nov 13 '19 at 16:26

Brian Thompson

13,263
4
23
43

score 4 · Answer 2 · answered Nov 13 '19 at 16:26

4

Please wrap all elements with parent container. Please make sure you are rendering one single entity.

i.e:

<div> // parent container
    <JqxTabs/>
    <JqxWindow />
</div>

You could use Fragment element too for parent element.

import React, {Fragment} from 'react';

answered Nov 13 '19 at 16:26

Rise

1,493
9
17

I did this in my code and code didn't throw any error but my functionality was not working as expected. – Tan Nov 13 '19 at 16:34
1

Yes. so issue was fixed. And in case, you will need to check your functionality again. – Rise Nov 13 '19 at 16:36
"JSX expression must have one parent element". This is related issue you are rendering multi entity without parent container. – Rise Nov 13 '19 at 16:38

score 2 · Answer 3 · answered Nov 13 '19 at 16:30

You will need to return a single element from a react component. To achieve this you can try one of these methods.

Using Fragments

import React, { Component,Fragment } from "react";

<Fragment> 
    <JqxTabs/>
    <JqxWindow />
</Fragment>

or

<> 
    <JqxTabs/>
    <JqxWindow />
</>

or you can wrap every element by a div

<div> 
    <JqxTabs/>
    <JqxWindow />
</div>

JSX expressions must have one parent element

3 Answers3