Checkbox not working with React Hooks

3 posts, 0 answers
  1. Bill
    Bill avatar
    2 posts
    Member since:
    Dec 2019

    Posted 30 Jan 2020 Link to this post

    I'm having an issue getting the Checkbox component to work properly with react hooks. I'm not finding many examples online on how to do so. My understanding is the the Checkbox Component should work identically to the HTML input[type=checkbox] element, but doesn't seem to be the case. 

    In the code below the first Kendo Checkbox will allow you to check it, but not uncheck it, while the 2nd HTML input[type=checkbox] element works as expected. 

    import React from 'react';
    import ReactDOM from 'react-dom';
    import React, {useState, useEffect} from "react";
    import { Checkbox} from "@progress/kendo-react-inputs";
     function App(props) {
      const [checked, setChecked] = useState(false);
      return (
        <div>
              <Checkbox
                label="Checkbox"
                checked={checked}
                onChange={e =>
                  setChecked(!checked)
                }
              />
              <input
                type="checkbox"
                checked={checked}
                onChange={e =>
                  setChecked(!checked)
                }
              />
        </div>
      );
    }
    ReactDOM.render(
        <App />,
        document.querySelector('my-app')
    );

     

    I'm sure I'm missing something very simple, but can't identify it.

  2. Bill
    Bill avatar
    2 posts
    Member since:
    Dec 2019

    Posted 30 Jan 2020 in reply to Bill Link to this post

    Here is an example that showcases this: https://stackblitz.com/edit/react-t749mp?file=app/main.jsx
  3. Stefan
    Admin
    Stefan avatar
    3008 posts

    Posted 31 Jan 2020 Link to this post

    Hello, Bill,

    I`m glad to inform you that this is already fixed in the dev version of the component.

    https://www.telerik.com/kendo-react-ui/components/installation/development-builds/

    After updating the demo to use the dev version, it was working as expected:

    https://stackblitz.com/edit/react-t749mp-zybsgi?file=app/main.jsx

    Apologies for the inconvenience this may have caused you.

    Regards,
    Stefan
    Progress Telerik

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top