<div id="root"></div>
@import "https://cdn.skypack.dev/@progress/kendo-theme-default@4.25.0/dist/all.css";
@import url("https://fonts.googleapis.com/css?family=Lato:400,400i,700, 900");

body {
  background: #0f0e16;
  color: #eee;
  font-family: Lato, sans-serif;
}
h1 {
  font-weight: 900;
}
strong {
  color: #f09035;
}
.k-list .k-item.k-state-selected,
.k-list-optionlabel.k-state-selected {
  background: #f09035;
}

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"));
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://assets.codepen.io/3/categories.js