Under Review
Last Updated: 02 Apr 2020 10:26 by ADMIN
Vlado
Created on: 23 Mar 2020 16:53
Type: Bug Report
0
Kendo React Drawer Basic setup of component

UPDATE: This is live code I prepared for you: https://stackblitz.com/edit/react-ts-dhhsaz?file=index.tsx

I get error:

 Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

But error appears to be inside KendoDrawer component. I can't figure out what is wrong. This is my component:

import React, { useState } from 'react';
import { withRouter, useLocation, useHistory } from 'react-router-dom';

import { Drawer, DrawerContent } from '@progress/kendo-react-layout';
import { Button } from '@progress/kendo-react-buttons';



export const SidebarDrawer = (props:any) => {

    const items = [
        { text: 'Povezivanje', icon: 'k-i-inbox', selected: true, route: '/povezivanje' },
        { separator: true },
        { text: 'Notifications', icon: 'k-i-bell', route: '/notifications' },
        { text: 'Calendar', icon: 'k-i-calendar', route: '/calendar' },
        { separator: true },
        { text: 'Attachments', icon: 'k-i-hyperlink-email', route: '/attachments' },
        { text: 'Favourites', icon: 'k-i-star-outline', route: '/favourites' }
    ];

    const [expanded, setExpanded] = React.useState(true);
    const [position, setPosition] = React.useState(true);
    const [selectedId, setSelectedId] = React.useState(items.findIndex(x => x.selected === true));

    let positionMode = position ? 'start' : 'end';

    const handleSelect = (ev:any) => {
        setSelectedId(ev.itemIndex);
        setExpanded(false);
    };

    const handleClick = () => { setExpanded(prevState => !prevState); };

    const handleChange = () => { setPosition(prevState => !prevState); };

    const drawerProps = {
        expanded: expanded,
        position: positionMode,
        mode: 'push',
        items: items.map(
            (item, index) => ({ ...item, selected: index === selectedId })),

        onSelect: handleSelect,
    }

    return (
        <Drawer {...drawerProps}>
            <DrawerContent>
                {props.children}
            </DrawerContent>
        </Drawer >
    );

};

export default withRouter(SidebarDrawer);

And this is how I use it inside App component:

import React, { useState } from 'react';
import { hot } from 'react-hot-loader';
import { Button } from '@progress/kendo-react-buttons'
import { Grid, GridColumn, GridDetailRow, GridToolbar } from '@progress/kendo-react-grid';
import '@progress/kendo-theme-bootstrap/dist/all.css';

import 'bootstrap/dist/css/bootstrap.min.css';
import { Drawer, DrawerContent } from '@progress/kendo-react-layout';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

import urlConstants from 'ClientApp/constants/urlConstants'
import { Connecting } from '../containers/connecting/Connecting';
import SidebarDrawer from 'ClientApp/components/SidebarDrawer/SidebarDrawer';

export const App: React.FC = () => {


    return (
        <React.Fragment>
            <Router>
                <SidebarDrawer>
                    <Switch>
                        <Route exact={true} path="/" component={Connecting} />

                    </Switch>
                </SidebarDrawer>
            </Router>
        </React.Fragment>
            )
}

export default hot(module)(App);
11 comments
ADMIN
Stefan
Posted on: 02 Apr 2020 10:26

Hello, Vlado,

I`m glad that the Drawer issue is resolved. Is it possible to share what the issue was, so we can improve the documentation on that part?

As for the Form, indeed we have plans to update it, and there many Form related improvements in the future planned. Also, the following blog post on it can be useful as well:

https://www.telerik.com/blogs/how-to-build-forms-with-react-the-easy-way

AllowSubmit is a boolean variable and it is mostly used as a flag

https://www.telerik.com/kendo-react-ui/components/form/api/FormRenderProps/#toc-allowsubmit

If the Form is not submitting, please ensure that the onSubmit handler on the HTML form and KendoReact Form are set:

        <Form
            onSubmit={handleSubmit} // this will be triggered on submit.
            render={(formRenderProps) => (
                <form onSubmit={formRenderProps.onSubmit} // attach our built-in handle to the HTML form

Regards,
Stefan
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Vlado
Posted on: 01 Apr 2020 08:26

I solved issuse with Drawer.

I think Form is not well documented. I didn' know I should use Field. I don't want to read all documentation. It should be intiutive.

AllowSubmit property on formRenderProps also is not documented. I don't know why my handleSubmit function is not called but I suppose it is because allowsubmit is set to false. Why? I don't know

ADMIN
Stefan
Posted on: 01 Apr 2020 06:54

Hello, Vlado,

We are sorry to hear that using our components did not meet your expectations and caused you frustration.

We spent more time and researched different cases for the Drawer and noticed that the issue was only in StackBlitz, the same example with the same version was working locally. We will further investigate this.

We will be happy to investigate more if sending us a runnable local version with the issue is possible. We have many different tests and many users using the Drawer, and this is a new error that we want to locate and fix, so it does not cause such issues in the future. We are trying our best to improve the components as much as possible.

-------------------------------

As for the Form, I inspected the example and I can confirm that the Field component is required when using the Form component. The Field component is interacting with the Form and it is responsible for updating the Form value. This is why all of our demos are using the Field component inside the Form:

https://www.telerik.com/kendo-react-ui/components/form/

We will have the feedback for the alert and think of a way to add a warning that the Field component is required inside the Form:

https://www.telerik.com/kendo-react-ui/components/form/

I have also added some Telerik points to your account from bringing this to our attention.

Regards,
Stefan
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Vlado
Posted on: 31 Mar 2020 12:36
Form is working (rendering) but I should ge alert, shouldn't I?
Vlado
Posted on: 31 Mar 2020 12:34

This is example of form not working:

 

https://stackblitz.com/edit/react-6tekcb

Vlado
Posted on: 31 Mar 2020 12:14
I also tried your Form component. It doesn't handle onSubmit event and I copied code from your website
Vlado
Posted on: 31 Mar 2020 12:11

I now also tryed yout Field component. I also get Invalid hook call. :O

 

Vlado
Posted on: 31 Mar 2020 11:04
I understand that your components are working but it they are not straightforward to use, often giving "Invalid hook call" errors, even for experinced developers like me. I don't know what else to say if you can't resolve problem

ADMIN
Stefan
Posted on: 27 Mar 2020 14:00

Hello, Vlado,

I`m sorry to hear that our components left this feeling in you and actually lost you time instead of helping.

We will be happy to inspect the real setup as well and see why the issue occurs.

I do understand that debugging such error could be irritating and time-consuming, this is why we recommend if you encounter an error to directly contact us, so in the time we debug our component, you have time to focus on other tasks. This is one of the benefits, as are we responsible for supporting this component.

Also, the biggest benefits for a product like ours shine in more complex components as the Grid, the Charts, and Scheduler, etc. These are very heavy components, and making them from scratch can be very time-consuming and we are making such components for different technologies for over 10 years and have experience in what could go wrong, still, we could make a mistake as well as no one is protected from them, but we are always ready to assist and fix them.

We do understand that sometimes learning the components-specific and tricks, could take more time than expected, but they ultimately help in deliver components application faster. 

I hope we can help and speed up project development.

Regards,
Stefan
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Vlado
Posted on: 27 Mar 2020 08:54

Maybe it works in this setup, but I have little bit different setup, and it does not work.

What is porpuse of this components if I loose more time debugging itthan I would loose by building my own components?

ADMIN
Stefan
Posted on: 24 Mar 2020 08:27

Hello, Vlado,

Thank you for the provided example.

I tested it, I can confirm that the issue is resolved in version 3.12.0.

Please update to the latest version and the Drawer, should be working as expected in this setup:

https://stackblitz.com/edit/react-ts-xunseb?file=SidebarDrawer.tsx

Apologies for the convenience this may have caused you.

Regards,
Stefan
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.