How to fix Type "string" is not assignable to type "React.ReactNode" in React

// Example error location
const MyComponent = ({ children }: { children: SomeCustomType }) => {
  return <div>{children}</div>;
  //               ^^^^^^^^ Type 'string' is not assignable to type 'React.ReactNode'
};

// Usage that triggers error
<MyComponent>Hello World</MyComponent>

// ❌ Problematic - custom type may be too restrictive
type CustomChildren = JSX.Element | JSX.Element[];

interface Props {
  children: CustomChildren; // Won't accept strings
}

// ✅ Correct - use ReactNode for maximum flexibility
interface Props {
  children: React.ReactNode; // Accepts strings, elements, arrays, etc.
}

const MyComponent = ({ children }: Props) => {
  return <div>{children}</div>;
};

// Now this works
<MyComponent>Hello World</MyComponent>

// ❌ Problematic - constraint excludes primitives
function renderContent<T extends JSX.Element>(content: T) {
  return <div>{content}</div>;
  //            ^^^^^^^ Type 'string' not assignable when calling with string
}

// ✅ Correct - constraint allows all valid ReactNode types
function renderContent<T extends React.ReactNode>(content: T) {
  return <div>{content}</div>;
}

// Or simply don't constrain at all
function renderContent(content: React.ReactNode) {
  return <div>{content}</div>;
}

// Both of these now work
renderContent("Hello");
renderContent(<span>World</span>);

// ❌ Problematic - conditional type may narrow incorrectly
type ComponentChildren<T> = T extends true ? JSX.Element : string;

interface Props<T extends boolean> {
  flag: T;
  children: ComponentChildren<T>; // Type becomes too specific
}

// ✅ Correct - use union type or ReactNode directly
interface Props {
  flag: boolean;
  children: React.ReactNode; // Simple and works everywhere
}

// Or if you need different types based on a condition
interface Props {
  flag: boolean;
  children: JSX.Element | string; // Explicit union
}

# Check for duplicate type definitions
npm ls @types/react

# If you see multiple versions, remove and reinstall
rm -rf node_modules package-lock.json
npm install

# Or update to latest
npm install --save-dev @types/react@latest @types/react-dom@latest

{
  "compilerOptions": {
    "jsx": "react-jsx",  // For React 17+
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": false  // Ensure type checking of declaration files
  }
}

// When you know a string is valid but TypeScript disagrees
const stringContent: string = "Hello World";

<MyComponent>
  {stringContent as React.ReactNode}
</MyComponent>

// Or cast the entire children prop
interface Props {
  children: SomeRestrictiveType;
}

const MyComponent = ({ children }: Props) => {
  return <div>{children as React.ReactNode}</div>;
};