How to fix Strings are not allowed as React children. Did you mean to use an array? in React

// ❌ Too strict - rejects strings
interface ButtonProps {
  children: JSX.Element;
}

// ✅ Correct - accepts strings and elements
interface ButtonProps {
  children: React.ReactNode;
}

export function Button({ children }: ButtonProps) {
  return <button>{children}</button>;
}

// Now this works:
<Button>Click me</Button>

import { PropsWithChildren } from 'react';

// Without other props
type ButtonProps = PropsWithChildren;

// With additional props
interface ButtonBaseProps {
  variant: 'primary' | 'secondary';
  onClick?: () => void;
}

type ButtonProps = PropsWithChildren<ButtonBaseProps>;

export function Button({ children, variant, onClick }: ButtonProps) {
  return (
    <button className={variant} onClick={onClick}>
      {children}
    </button>
  );
}

// If you ONLY accept specific components:
interface TabsProps {
  children: React.ReactElement<TabProps> | React.ReactElement<TabProps>[];
}

// But note: this prevents string children
<Tabs>
  <Tab label="First">Content</Tab>  {/* ✅ Works */}
  Some text  {/* ❌ Error */}
</Tabs>

// If you need validation beyond types, use runtime checks:
export function Tabs({ children }: PropsWithChildren) {
  React.Children.forEach(children, (child) => {
    if (!React.isValidElement(child) || child.type !== Tab) {
      throw new Error('Tabs only accepts Tab components as children');
    }
  });

  return <div className="tabs">{children}</div>;
}

// Library component only accepts JSX.Element
import { StrictComponent } from 'some-library';

// ❌ Doesn't work
<StrictComponent>
  Hello World
</StrictComponent>

// ✅ Wrap in fragment
<StrictComponent>
  <>Hello World</>
</StrictComponent>

// ✅ Or use a span/div
<StrictComponent>
  <span>Hello World</span>
</StrictComponent>