[Solved]-ReactJs: What should the PropTypes be for this.props.children?-Reactjs

example:

import react from 'react';
import proptypes from 'prop-types';

class menuitem extends react.component {
    render() {
        return (
            <li>
                <a href={this.props.href}>{this.props.children}</a>
            </li>
        );
    }
}

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

accoriding to proptypes documentation element is used for react element, and children is one of them:

// a react element.
optionalelement: proptypes.element,

then you can combine it with arrayof

component.proptypes = { children: proptypes.arrayof(proptypes.element).isrequired, };

then it will require at least one children.

try a custom proptypes :

 const  childrenproptypelogic = (props, propname, componentname) => {
          const prop = props[propname];
          return react.children
                   .toarray(prop)
                   .find(child => child.type !== 'div') && new error(`${componentname} only accepts "div" elements`);
 };


static proptypes = {

   children : childrenproptypelogic

}

fiddle

const {component, proptypes} = react;

 const  childrenproptypelogic = (props, propname, componentname) => {
             var error;
          var prop = props[propname];
    
          react.children.foreach(prop, function (child) {
            if (child.type !== 'div') {
              error = new error(
                '`' + componentname + '` only accepts children of type `div`.'
              );
            }
          });
    
          return error;
    };
    
  

class containercomponent extends component {
  static proptypes = {
    children: childrenproptypelogic,
  }

  render() {
    return (
      <div>
        {this.props.children}
      </div>
    );
  }
}



class app extends component {
   render(){
    return (
    <containercomponent>
        <div>1</div>
        <div>2</div>
      </containercomponent>
    )
   }
}

reactdom.render(<app /> , document.queryselector('section'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<section />

if you want to include render prop components:

  children: proptypes.oneoftype([
    proptypes.arrayof(proptypes.node),
    proptypes.node,
    proptypes.func
  ])

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
  ])
}

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

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,
}

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. however i wouldn't recommend it. as mentioned in the comments below, it does somewhat defeat the point of using proptypes and there are usually other ways to specify what your component requires. also bare in mind that eslint and ts may (probably) not be happy with this lack of specificity:

proptypes.any