Why is React saying “Invalid prop `children`” types is object not function?

I have problem with prop-types. Warning message appear which said that children is object not a function.

But when I change that in object I have problem with npm Lint.

Which says that cannot be type of object.

How to avoid this issue?

Component code:

import propTypes from 'prop-types';
import * as React from 'react';

export default function layout({ children, title }) {
  return (
    <div className="root">

      <h2>{title}</h2>

      {children}

    </div>
  );
}

layout.propTypes = {
  children: propTypes.func.isRequired,
  title: propTypes.string.isRequired
};

Warrning message:

Warning: Failed prop type: Invalid prop children of type object supplied to layout, expected function. in layout in Index in Container in App in Context.Provider in Context.Provider in Context.Provider in Context.Provider

Answer

The react children props is not a function its sort of an object.

try this: children: PropTypes.element.isRequired

Advertisement

Answer