0

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

juliomalves
  • 42,130
  • 20
  • 150
  • 146
Mark James
  • 338
  • 4
  • 15
  • 43
  • 1
    Probably duplicate of - https://stackoverflow.com/questions/33117449/invariant-violation-objects-are-not-valid-as-a-react-child/51961113#51961113 – Meet Zaveri May 24 '19 at 10:53

1 Answers1

2

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

try this: children: PropTypes.element.isRequired

wodwin
  • 69
  • 5