Как отрендерить такой компонент?

Question

[mashincode]

В общем пытаюсь отрендерить компонент стандартным способ через , но получаю ошибку

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.

Вот мой код

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

[Вадим]

Так как код Вы скинули не полный, то и дебажить сложнее. У Вас тут явно не 338 строк кода, на которой показывает ошибку, плюс непонятно откуда берущаяся переменная в cloneDeep.

Поэтому на глаз: renderопределить как метод, а не как переменную?
https://ru.reactjs.org/docs/components-and-props.html

И сделать return из App

то есть

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

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

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

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

Comments

[mashincode]

не помогло, там же ошибка :) Весь код не хотел присылать, так как он страшный немного, но в научных целях, вотс в блоке js добавил всю страничку

[mashincode]

О нет, ссылки не проходят хттпс://codepen.io/howuu/pen/yLJVBPd

[Вадим]

mashincode, это так просто не работает :-) От того, что вы просто закинули всё на кодпен, оно само не заработает. Нужно делать настройки. Подключать библиотеки и тд.

На кодпене не запускается совсем по другой причине.
И то, что Вы закинули на кодпен - не содержит исправлений, которые я предложил вам сделать.
Проверьте всё ещё раз.

[mashincode]

Вадим, ошибка была еще в том, что забыл return прописать, на codeopen загрузил так как тут ограниченое по количеству символов) Спасибо, ваш ответ был решением)

Answer 2

[Zhanna_K]

Вместо

function App() {
  <DragAndDropSidebar/>
}

Должно быть

function App() {
return (
  <DragAndDropSidebar/>
   )
}

Comments

[mashincode]

Спасибо) Глупо такие ошибки делать, но к сожалению (или к счастью) работаю не с тем, с чем привык, я вообще бекендом должен заниматься, но все отсутствуют специалисты :) Хорошо, что здесь есть