Why am I getting warning for functions as a React Child on this

Question

what am I missing? I cant spot it and my grids are not rendering properly. I am getting warnings about functions not valid as a React Child.

  render() {
    return (
      <ModalDynamic
        defaultWidth={1200}
        defaultHeight={400}
        defaultX={100}
        defaultY={100}
        display={this.props.showPartsModal}
        title={
          "Parts for Invoice: " +
          (this.props.selectedHistory[0] !== undefined
            ? this.props.selectedHistory[0].invoice_number
            : "N/A")
        }
        dealerPath="[ 12345 ] Some Dealer"
        dismissAction={this.props.dismissAction}
      >
        <div
          //className="ag-theme-bootstrap container-fluid full-height zero-gap modal-container"
          className="ag-fresh container-fluid full-height zero-gap modal-container"
          style={{
            height: "calc(100%)",
            overflowX: "auto"
          }}
          id="viewPartsGrid"
        >
          <AgGridReact
            columnDefs={this.state.columns}
            rowData={this.props.selectedHistory}
            suppressMenuHide="true"
            suppressRowClickSelection="false"
            suppressColumnVirtualisation="false"
            sideBar="false"
            rowSelection="single"
            enableColResize="true"
            enableSorting="true"
            enableFilter="true"
            onGridReady={this.onGridReady}
          />
        </div>
        <div className="rnd-footer">
          <div className="rnd-left">{this.dealerLabel}</div>
          <div className="rnd-right">
            {this.state.gridAPI ? (
              <OverlayTrigger overlay={this.csvTip}>
                <Button
                  className="btn btn-primary btn-sm"
                  onClick={() =>
                    this.state.gridAPI.exportDataAsCsv({
                      fileName:
                        "Parts Invoice #" +
                        (this.props.selectedHistory[0].invoice_number
                          ? this.props.selectedHistory[0].invoice_number
                          : "N/A")
                    })
                  }
                >
                  <i className="fa fa-file-excel-o" />
                </Button>
              </OverlayTrigger>
            ) : null}
          </div>
        </div>
      </ModalDynamic>
    );
  }
}

The code compiles but the grid seems to not do what I am trying to write it to do. Columns are not resizable and the window itself isn't either.

Answer 1

I think this line may give you warning

 <div className="rnd-left">{this.dealerLabel}</div>

If this is a function that return some static value. Declare that in a new variable

Example in render

const Button = <button onClick={this.yourmethod}>Click Me</button>

return (
   <Button>
)