ReactJs What should the PropTypes be for this props children

Question

Given a simple component that renders its children   class ContainerComponent extends Component     static propTypes         children  PropTypes object isRequired         render         return          lt div gt           this props children         lt  div gt                export default ContainerComponent    Question  What should the propType of the children prop be   When I set it as an object  it fails when I use the component with multiple children    lt ContainerComponent gt     lt div gt 1 lt  div gt     lt div gt 2 lt  div gt   lt  ContainerComponent gt       Warning  Failed prop type  Invalid prop children of type array   supplied to ContainerComponent  expected object    If I set it as an array  it will fail if I give it only one child  i e      lt ContainerComponent gt     lt div gt 1 lt  div gt   lt  ContainerComponent gt       Warning  Failed prop type  Invalid prop children of type object   supplied to ContainerComponent  expected array    Please advise  should I just not bother doing a propTypes check for children elements

User · Accepted Answer

Try something like this utilizing oneOfType or PropTypes node  import PropTypes from  prop-types        static propTypes         children  PropTypes oneOfType           PropTypes arrayOf PropTypes node           PropTypes node        isRequired     or  static propTypes         children  PropTypes node isRequired

User · Answer

If you want to match exactly a component type  check this  MenuPrimary propTypes       children  PropTypes oneOfType       PropTypes arrayOf MenuPrimaryItem       PropTypes objectOf MenuPrimaryItem           If you want to match exactly some component types  check this  const HeaderTypes       PropTypes objectOf MenuPrimary     PropTypes objectOf UserInfo     Header propTypes       children  PropTypes oneOfType       PropTypes arrayOf PropTypes oneOfType     HeaderTypes            HeaderTypes

User · Answer

The answers here don t seem to quite cover checking the children exactly  node and object are too permissive  I wanted to check the exact element  Here is what I ended up using    Use oneOfType     to allow for single or array of children Use shape and arrayOf shape      for single and array of children  respectively Use oneOf for the child element itself   In the end  something like this   import PropTypes from  prop-types  import MyComponent from    MyComponent   children  PropTypes oneOfType     PropTypes shape       type  PropTypes oneOf  MyComponent            PropTypes arrayOf      PropTypes shape         type  PropTypes oneOf  MyComponent                   isRequired   This issue helped me figure this out more clearly  https   github com facebook react issues 2979

User · Answer

Example    import React from  react   import PropTypes from  prop-types    class MenuItem extends React Component       render             return                lt li gt                   lt a href  this props href  gt  this props children  lt  a gt               lt  li gt                      MenuItem defaultProps         href           children   Main page      MenuItem propTypes         href  PropTypes string isRequired      children  PropTypes string isRequired     export default MenuItem    Picture  Shows you error in console if the expected type is different

User · Answer

If you want to include render prop components    children  PropTypes oneOfType       PropTypes arrayOf PropTypes node       PropTypes node      PropTypes func

User · Answer

The PropTypes documentation has the following      Anything that can be rendered  numbers  strings  elements or an array     or fragment  containing these types  optionalNode  PropTypes node    So  you can use PropTypes node to check for objects or arrays of objects  static propTypes        children  PropTypes node isRequired

User · Answer

Try a custom propTypes     const  childrenPropTypeLogic    props  propName  componentName    gt              const prop   props propName             return React Children                     toArray prop                      find child   gt  child type      div    amp  amp  new Error    componentName  only accepts  div  elements          static propTypes         children   childrenPropTypeLogic      Fiddle   x000D   x000D  const  Component  PropTypes    React  x000D   x000D   const  childrenPropTypeLogic    props  propName  componentName    gt    x000D               var error  x000D            var prop   props propName   x000D       x000D            React Children forEach prop  function  child    x000D              if  child type      div     x000D                error   new Error  x000D                        componentName      only accepts children of type  div    x000D                   x000D                x000D                x000D       x000D            return error  x000D         x000D       x000D     x000D   x000D  class ContainerComponent extends Component   x000D    static propTypes     x000D      children  childrenPropTypeLogic  x000D      x000D   x000D    render     x000D      return   x000D         lt div gt  x000D           this props children  x000D         lt  div gt  x000D         x000D      x000D    x000D   x000D   x000D   x000D  class App extends Component   x000D     render    x000D      return   x000D       lt ContainerComponent gt  x000D           lt div gt 1 lt  div gt  x000D           lt div gt 2 lt  div gt  x000D         lt  ContainerComponent gt  x000D        x000D       x000D    x000D   x000D  ReactDOM render  lt App   gt    document querySelector  section    x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 1 0 react min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 1 0 react-dom min js  gt  lt  script gt  x000D   x000D   lt section   gt  x000D   x000D   x000D

User · Answer

For me it depends on the component  If you know what you need it to be populated with then you should try to specify exclusively  or multiple types using  PropTypes oneOfType   If you want to refer to a React component then you will be looking for PropTypes element  Although  PropTypes node  describes anything that can be rendered - strings  numbers  elements or an array of these things  If this suits you then this is the way  With very generic components  who can have many types of children  you can also use the below - though bare in mind that eslint and ts may not be happy with this lack of specificity  PropTypes any

[reactjs] ReactJs: What should the PropTypes be for this.props.children?

Examples related to reactjs

Examples related to jsx

Examples related to react-proptypes