import * as React from "https://cdn.skypack.dev/react@^16.13.1";
import * as ReactDOM from "https://cdn.skypack.dev/react-dom@^16.13.1";

import { DropDownList } from "https://cdn.skypack.dev/@progress/kendo-react-dropdowns";

const App = () => {
  const initState = { CategoryID: null, CategoryName: "Product categories" };

  const [dropdownlistCategory, setDropdownlistCategory] = React.useState(
    initState
  );

  return (
    <div className="App">
      <h1>Hello, from KendoReact!</h1>
      <p>
        Selected category: <strong>{dropdownlistCategory.CategoryName}</strong>
      </p>
      <p>
        <DropDownList
          data={categories}
          dataItemKey="CategoryID"
          textField="CategoryName"
          defaultItem={initState}
          value={dropdownlistCategory}
          onChange={(e) => {
            console.log(e);
            setDropdownlistCategory(e.value);
          }}
        />
        &nbsp;
      </p>
    </div>
  );
};

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