How to render such a component?

Question

React

In general, I'm trying to render a component in the standard way using , but I get an error

Line 338:  Expected an assignment or function call and instead saw an expression  no-unused-expressions

Search for the keywords to learn more about each error.

Here is my code

class DragAndDropSidebar extends Component {
  
    constructor(props) {
        super(props)
        this.state = cloneDeep(chartSimple)
    }

    render = () => {
        const chart = this.state
        const stateActions = mapValues(actions, (any) =>
            (...args) => this.setState(...args))
        return (
            <Page>
                <Content>
                    <FlowChartWithState initialValue={chart} config={{
                        snapToGrid: true,
                    }} Components={{
                        NodeInner: NodeInnerCustom,

                    }} callbacks={stateActions}/>
                </Content>
                <Sidebar>
                    { chart.selected.type
                        ? <Message>
                            <div>Type: {chart.selected.type}</div>
                            <div>ID: {chart.selected.id}</div>
                            <br/>
                            {/*
                We can re-use the onDeleteKey action. This will delete whatever is selected.
                Otherwise, we have access to the state here so we can do whatever we want.
              */}
                            <button onClick={() => stateActions.onDeleteKey({})}>Delete</button>
                        </Message>
                        : <Message>Click on a Node, Port or Link</Message> }
                </Sidebar>
                <Sidebar>

                    <SidebarItem
                        type="type1"
                        ports={{
                            port1: {
                                id: 'port1',
                                type: 'right',
                                properties: {
                                    custom: 'property',
                                    value: "yes",
                                },
                            },
                        }}
                        properties={{
                            custom: 'property',
                        }}
                    />
                    <SidebarItem
                        type="type2"
                        ports={{
                            port1: {
                                id: 'port1',
                                type: 'right',
                                properties: {
                                    custom: 'property',
                                    value: "yes",
                                },
                            },
                        }}
                    />
                    <SidebarItem
                        type="type3"
                        ports={{
                            port1: {
                                id: 'port1',
                                type: 'left',
                                properties: {
                                    custom: 'property',
                                    value: "no",
                                },
                            },
                        }}
                    />
                    <SidebarItem
                        type="type4"
                        ports={{
                            port1: {
                                id: 'port1',
                                type: 'left',
                                properties: {
                                    custom: 'property',
                                    value: "no",
                                },
                            },
                        }}
                    />
                    <SidebarItem
                        type="type5"
                        ports={{
                            port1: {
                                id: 'port1',
                                type: 'left',
                                properties: {
                                    custom: 'property',
                                    value: "no",
                                },

                            },
                        }}
                    />
                    <SidebarItem
                        type="type6"
                        ports={{
                            port1: {
                                id: 'port1',
                                type: 'left',
                                properties: {
                                    custom: 'property',
                                    value: "no",
                                },
                            },
                            port2: {
                                id: 'port2',
                                type: 'right',
                                properties: {
                                    custom: 'property',
                                    value: "yes",
                                },
                            },
                        }}
                    />
                </Sidebar>
            </Page>
        )
    }
}

function App() {
  <DragAndDropSidebar/>
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 1

Since you threw off the code not complete, it is more difficult to debug. You obviously don’t have 338 lines of code here, on which it shows an error, plus it’s not clear where the variable in cloneDeep comes from.
Therefore, by eye: renderdefine as a method, and not as a variable?
https://ru.reactjs.org/docs/components-and-props.html
And make return from App
i.e.

// Не так
render = () => {
// code...
}

// А так
render() {
// code...
}

// И так
function App() {
  return <DragAndDropSidebar/>
}

// Или так:
const App = <DragAndDropSidebar/>