Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What is the Flow equivalent of React.PropTypes.node?

What is the Flow equivalent of React.PropTypes.node (i.e., anything that can be rendered by React, if there is one? Do I have to create it myself as a union type?

In other words, what would replace ??? here?

type Props = {
  children: ???,
}

const UselessComponent
  : (props: Props) => React$Element<*>
  = ({ children }) => (
    <div>
      {children}
    </div>
  )

UselessComponent.propTypes = {
  children: React.PropTypes.node.isRequired,
}
like image 657
ahstro Avatar asked Nov 28 '16 15:11

ahstro


People also ask

What is PropTypes node in React?

PropTypes. node: any render-able value like numbers and string, that can actually be rendered on screen. PropTypes. any: any type of value, even those are non-render-able like boolean.

What is the difference between flow and PropTypes?

PropTypes provide run-time type checking in the browser console, while Flow types provide compile-time type-checking.

What is the use of PropTypes in React?

PropTypes are simply a mechanism that ensures that the passed value is of the correct datatype. This makes sure that we don't receive an error at the very end of our app by the console which might not be easy to deal with.

Is PropTypes included in React?

React.PropTypes has moved into a different package since React v15.5. Please use the prop-types library instead. We provide a codemod script to automate the conversion. As your app grows, you can catch a lot of bugs with typechecking.


2 Answers

It looks like it is still an issue here.

According to the discussion in that issue, what you should do until it is fixed:

type Props = {
  children?: React.Element<*>,
};
like image 158
Dor Weid Avatar answered Sep 18 '22 21:09

Dor Weid


For versions of flow >= 0.53, use the new type React.Node for props.children and anywhere you are expecting a renderable node.

The definition of React.Node can be roughly approximated with a React.ChildrenArray:

type Node = React.ChildrenArray<void | null | boolean | string |
number | React.Element<any>>;

There was a major rework of the react types in flow 0.53. Summary of the changes and instructions on how to migrate are in the release notes. The flow docs explain how to use in detail.

For example:

import type { Node } from 'react';

type Props = {
  input?: Node,
}
like image 26
Derek Dahmer Avatar answered Sep 20 '22 21:09

Derek Dahmer