ts(1128)-Declaration or statement expected at public render() line - reactjs

Question

I have the following code (followed this sample code) which compiles without any errors. The code is making use of the sample code to use jQXWidget.
import React from "react";
import * as ReactDOM from "react-dom";
import JqxTabs from "jqwidgets-scripts/jqwidgets-react-tsx/jqxtabs";
import JqxGrid, {
IGridProps,
jqx
} from "jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid";
import { properties } from ".././properties";
type Props = {
project
};
export interface MyState extends IGridProps {
visible: boolean,
assocProjectElementsVisible: boolean,
project: {},
selectedRowIndex: number,
deleteDialogVisible: boolean
}
export class ProjectElements extends React.PureComponent<Props, MyState> {
private myTabs = React.createRef<JqxTabs>();
private projectSpacesGridElement = React.createRef<HTMLDivElement>();
private pSpacesGridElement = React.createRef<JqxGrid>();
private baseUrl = properties.baseUrlWs;
constructor(props: Props) {
super(props);
/* const deleteRowClick = () => {
const selectedrowindex = this.pSpacesGridElement.current.getselectedrowindex();
if (selectedrowindex > -1) {
this.setState({
selectedRowIndex: selectedrowindex,
deleteDialogVisible: true
})
} */
this.state = {
visible: false,
project: {},
assocProjectElementsVisible: false,
selectedRowIndex: null,
deleteDialogVisible: false,
rendergridrows: (params: any): any[] => {
const data = params.data;
return data;
}
};
}
public render() {
return (
<JqxTabs
ref={this.myTabs}
theme={"arctic"}
width="1390px"
height={560}
initTabContent={this.initWidgets}
>
<ul>
<li style={{ marginLeft: 30 }}>
<div style={{ height: 20, marginTop: 5 }}>
<div style={{ float: "left" }}></div>
<div
style={{
marginLeft: 4,
verticalAlign: "middle",
textAlign: "center",
float: "left"
}}
>
Project Spaces
</div>
</div>
</li>
</ul>
<div style={{ overflow: "hidden" }}>
<div id="jqxGrid" ref={this.projectSpacesGridElement} />
<div style={{ marginTop: 10, height: "15%", width: "100%" }}></div>
</div>
</JqxTabs>
);
}
//Tab 1
private projectSpacesGrid = () => {
const source: any = {
datafields: [
{ name: "id", type: "long" },
{ name: "fileName", type: "string" }
],
datatype: "json",
root: "ProjectElements",
url: this.baseUrl + `api/ProjectElements/search/getProjectElementsByProjectId`
};
const dataAdapter = new jqx.dataAdapter(source, {
//async: false,
autoBind: true,
downloadComplete: (data: any, status: any, xhr: any): void => {
source.totalrecords = parseInt(data["page"].totalElements);
},
formatData: (data: any): any => {
data.value = this.props.project.id;
data.page = data.pagenum;
data.size = data.pagesize;
if (data.sortdatafield && data.sortorder) {
data.sort = data.sortdatafield + "," + data.sortorder;
}
return data;
},
loadError: (xhr: any, status: any, error: any) => {
alert('Error loading "' + source.url + '" : ' + error);
}
});
const columns: IGridProps["columns"] = [
{ datafield: "id", text: "ID Number", width: 100 },
{ datafield: "fileName", text: "Project Name", width: 275 }
];
const grid =
this.state.visible || this.state.assocProjectElementsVisible ? null : (
<div>
<JqxGrid
ref={this.pSpacesGridElement}
width={"100%"}
height={"100%"}
theme={"arctic"}
source={dataAdapter}
columns={columns}
/>
</div>
);
ReactDOM.render(grid, this.projectSpacesGridElement.current!);
};
private initWidgets = (tab: any) => {
switch (tab) {
case 0:
this.projectSpacesGrid();
break;
}
};
}
However,as soon as I uncomment the deleteRowClick method I get an error at public on the public render() line as shown in the screenshot below:
What am I doing wrong after uncommenting the deleteRowClick method?

Answer 1

You're missing a closing } at the end of the deleteRowClick function.