How to fix Generic type "T" is not constrained, consider using extends in React

// ❌ Unconstrained generic
function MyComponent<T>(props: { data: T }) {
  return <div>{JSON.stringify(props.data)}</div>;
}

// ❌ Also unconstrained
interface ListProps<T> {
  items: T[];
  onItemClick: (item: T) => void;
}

// ✅ Constrained to objects
function MyComponent<T extends object>(props: { data: T }) {
  return <div>{JSON.stringify(props.data)}</div>;
}

// ✅ Constrained to specific shape
interface Item {
  id: string;
  name: string;
}

interface ListProps<T extends Item> {
  items: T[];
  onItemClick: (item: T) => void;
}

// ✅ Constrained to React component props
type BaseProps<T extends React.ComponentPropsWithoutRef<'div'>> = T & {
  customProp: string;
};

// ✅ Explicitly allow any type
function MyGenericHook<T extends unknown>(initialValue: T) {
  const [value, setValue] = React.useState<T>(initialValue);
  return [value, setValue] as const;
}

// Or for truly anything including primitives
function MyFlexibleComponent<T extends unknown>(props: {
  data: T;
  render: (item: T) => React.ReactNode;
}) {
  return <>{props.render(props.data)}</>;
}

// .eslintrc.json
{
  "rules": {
    "@typescript-eslint/no-unnecessary-type-constraint": "off"
  }
}

// tsconfig.json - ensure strict mode is enabled for better warnings
{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true
  }
}