How to fix Warning: failed prop type: invalid prop `children` of type `object` supplied to `Component`, expected a single ReactElement in React

Warning: failed prop type: invalid prop `children` of type `object` 
supplied to `MyComponent`, expected a single ReactElement
                    ^^^^^^^^^^^

// Component expects single ReactElement
Component.propTypes = {
  children: PropTypes.element.isRequired
};

// Component expects any renderable content
Component.propTypes = {
  children: PropTypes.node
};

// Component expects exactly one child
Component.propTypes = {
  children: PropTypes.element
};

// Component expects array of elements
Component.propTypes = {
  children: PropTypes.arrayOf(PropTypes.element)
};

// Component accepts single element OR array
Component.propTypes = {
  children: PropTypes.oneOfType([
    PropTypes.element,
    PropTypes.arrayOf(PropTypes.element)
  ])
};

// ❌ Bad - multiple children when single element expected
<Tooltip>
  <Button>Click me</Button>
  <Icon name="help" />
</Tooltip>

// ✅ Good - wrap multiple children in Fragment
<Tooltip>
  <React.Fragment>
    <Button>Click me</Button>
    <Icon name="help" />
  </React.Fragment>
</Tooltip>

// ✅ Better - use short syntax
<Tooltip>
  <>
    <Button>Click me</Button>
    <Icon name="help" />
  </>
</Tooltip>

// ❌ Bad - passing plain object as children
<Component>
  {{ key: 'value', data: 'test' }}
</Component>

// ❌ Bad - passing function without calling it
<Component>
  {myFunction}
</Component>

// ✅ Good - pass React element
<Component>
  <div>Content here</div>
</Component>

// ✅ Good - call function that returns React element
<Component>
  {myFunction()}
</Component>

// ✅ Good - use render props pattern correctly
<Component>
  {(data) => <div>{data}</div>}
</Component>

// ❌ Bad - sometimes returns array, sometimes single element
<Container>
  {isMultiple ? [<Item key="1" />, <Item key="2" />] : <Item />}
</Container>

// ✅ Good - always returns single element
<Container>
  {isMultiple ? (
    <>
      <Item key="1" />
      <Item key="2" />
    </>
  ) : (
    <Item />
  )}
</Container>

// ❌ Bad - might return undefined
<Container>
  {items.map(item => <Item key={item.id} {...item} />)}
</Container>

// ✅ Good - handle empty case explicitly
<Container>
  {items.length > 0 ? (
    items.map(item => <Item key={item.id} {...item} />)
  ) : (
    <EmptyState />
  )}
</Container>

// Before - too strict, only accepts single element
MyComponent.propTypes = {
  children: PropTypes.element.isRequired
};

// After - accepts any renderable content
MyComponent.propTypes = {
  children: PropTypes.node.isRequired
};

// Or accept single element or array
MyComponent.propTypes = {
  children: PropTypes.oneOfType([
    PropTypes.element,
    PropTypes.arrayOf(PropTypes.element)
  ]).isRequired
};

// Or accept specific element types
MyComponent.propTypes = {
  children: PropTypes.oneOfType([
    PropTypes.element,
    PropTypes.node,
    PropTypes.func
  ])
};

import React from 'react';
import PropTypes from 'prop-types';

function SingleChildWrapper({ children }) {
  // Throws error if children is not exactly one element
  const child = React.Children.only(children);
  
  return React.cloneElement(child, {
    className: 'wrapped'
  });
}

SingleChildWrapper.propTypes = {
  children: PropTypes.element.isRequired
};

// Usage
<SingleChildWrapper>
  <div>Only one child allowed</div>
</SingleChildWrapper>

// This would throw error:
// <SingleChildWrapper>
//   <div>First</div>
//   <div>Second</div>
// </SingleChildWrapper>