How to fix React.Children.only expected to receive a single React element child in React

Error: React.Children.only expected to receive a single React element child.
    at Children.only
    at YourWrapperComponent
    at ParentComponent

// Before (causes error)
<WrapperComponent>
  <div>First element</div>
  <div>Second element</div>
</WrapperComponent>

// After (fixed with Fragment)
<WrapperComponent>
  <>
    <div>First element</div>
    <div>Second element</div>
  </>
</WrapperComponent>

// Or use explicit Fragment syntax
<WrapperComponent>
  <React.Fragment>
    <div>First element</div>
    <div>Second element</div>
  </React.Fragment>
</WrapperComponent>

// Wrap in a div
<WrapperComponent>
  <div>
    <h1>Title</h1>
    <p>Content</p>
    <button>Action</button>
  </div>
</WrapperComponent>

// Or use span for inline content
<InlineWrapper>
  <span>
    <Icon />
    <Text>Label</Text>
  </span>
</InlineWrapper>

// This creates THREE children (two divs + whitespace)
<Component>
  <div>First</div>
  {' '} {/* This whitespace is a text node child */}
  <div>Second</div>
</Component>

// This also creates multiple children (text + element)
<Component>
  Some text here
  <div>Element</div>
</Component>

// Fixed - only one child
<Component>
  <div>
    Some text here
    <div>Element</div>
  </div>
</Component>

// Wrong - array is not a single element
<Component>
  {items.map(item => <div key={item.id}>{item.name}</div>)}
</Component>

// Wrong - still an array with one item
<Component>
  {[<div key="1">Single item</div>]}
</Component>

// Fixed - wrap the mapped array
<Component>
  <div>
    {items.map(item => <div key={item.id}>{item.name}</div>)}
  </div>
</Component>

// Or if you only need one item, render it directly
<Component>
  <div key={items[0].id}>{items[0].name}</div>
</Component>

// shadcn/ui Button with asChild
// Wrong - multiple children
<Button asChild>
  <Icon />
  <span>Click me</span>
</Button>

// Correct - single child element
<Button asChild>
  <a href="/home">
    <Icon />
    <span>Click me</span>
  </a>
</Button>

// Or don't use asChild
<Button>
  <Icon />
  <span>Click me</span>
</Button>

// Instead of this (restrictive)
function Wrapper({ children }: { children: ReactElement }) {
  const onlyChild = React.Children.only(children);
  return React.cloneElement(onlyChild, { className: 'wrapper' });
}

// Consider this (flexible)
function Wrapper({ render }: { render: (props: any) => ReactElement }) {
  return render({ className: 'wrapper' });
}

// Usage
<Wrapper render={(props) => <div {...props}>Content</div>} />

// Or use component props
function Wrapper({ component: Component, ...props }: { component: ComponentType }) {
  return <Component {...props} className="wrapper" />;
}