Back to Refine

Default Value Live Preview

documentation/versioned_docs/version-4.xx.xx/data/hooks/use-select/_default-value-live-preview.md

3.25.01.0 KB
Original Source
tsx
setInitialRoutes(["/categories"]);
// visible-block-start
import { useSelect } from "@refinedev/core";

interface ICategory {
  id: number;
  title: string;
}

const Categories: React.FC = () => {
  const { options } = useSelect<ICategory>({
    resource: "categories",
    // highlight-next-line
    defaultValue: 3,
  });

  return (
    <label>
      Select a category:
      <select>
        {options?.map((option) => (
          <option key={option.value} value={option.value}>
            {option.value}-{option.label}
          </option>
        ))}
      </select>
    </label>
  );
};
// visible-block-end
setRefineProps({
  resources: [
    {
      name: "categories",
      list: "/categories",
    },
  ],
});
render(
  <ReactRouter.BrowserRouter>
    <RefineHeadlessDemo>
      <ReactRouter.Routes>
        <ReactRouter.Route path="/categories" element={<Categories />} />
      </ReactRouter.Routes>
    </RefineHeadlessDemo>
  </ReactRouter.BrowserRouter>,
);