Menu
Given a simple component that renders its children:
class ContainerComponent extends Component { static propTypes = { children: PropTypes.object.isRequired, } render() { return ( <div> {this.props.children} </div> ); } } 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:
<ContainerComponent> <div>1</div> <div>2</div> </ContainerComponent> Warning: Failed prop type: Invalid prop
childrenof typearraysupplied toContainerComponent, expectedobject.
If I set it as an array, it will fail if I give it only one child, i.e.:
<ContainerComponent> <div>1</div> </ContainerComponent> 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?
468
Class components Like FC , the Component type automatically includes the children prop. So, the type of the children prop in a class component is ReactNode as well.
PropTypes is React's internal mechanism for adding type checking to components. React components use a special property named propTypes to set up type checking. When props are passed to a React component, they are checked against the type definitions configured in the propTypes property.
Essentially, props. children is a special prop, automatically passed to every component, that can be used to render the content included between the opening and closing tags when invoking a component. These kinds of components are identified by the official documentation as “boxes”.
PropTypes are a way to validate the values that are passed in through our props. node We can pass anything that can be rendered, such as numbers, string, DOM elements, arrays, or fragments that contain them using the React.
props.children is a prop like every other prop in React, but it's passed differently (when using JSX) between tags: What you put between the tags will be passed to component as props.children. It can be: undefined, null, a boolean, a number, a string, a React element, or an array of any of those types recursively.
Let’s explain with an example: The Profile component has two children: ProfileImage and ProfileDetails, while these two have no children. “In JSX expressions that contain both an opening tag and a closing tag, the content between those tags is passed as a special prop: props.children ” — React documentation
The component type, like the FC type, includes the children prop by default. When we hover over the children prop, we can see what type it has, as seen in the image below: So, the type of the children prop in a class component is ReactNode. Here’s a list of types you might want to utilize in your React application using Typescript.
— React documentation As covered in the official documentation, you might sometimes need to fill multiple “holes” in a component. In such cases, instead of using props.children, defining multiple custom props may be the preferable approach; as shown in the following example:
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, } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
