Stack Overflow
Stack Overflow

Questions tagged [react-proptypes]

This tag should be used if the question involves the type-checking system of React.js components, known as `PropTypes`.

React.js has a system for type-checking the arguments passed to a React.js component, known as PropTypes. This system is detailed here: https://facebook.github.io/react/docs/typechecking-with-proptypes.html.

590 questions
326
votes
8 answers

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

Given a simple component that renders its children: class ContainerComponent extends Component { static propTypes = { children: PropTypes.object.isRequired, } render() { return (
{this.props.children}
…
d3ming
  • 6,860
  • 4
  • 25
  • 31
303
votes
5 answers

React PropTypes: Allow different types of PropTypes for one prop

I have a component that receives a prop for its size. The prop can be either a string or a number ex: "LARGE" or 17. Can I let React.PropTypes know that this can be either one or the other in the propTypes validation? If I don't specify the type I…
Kevin Amiranoff
  • 9,811
  • 5
  • 36
  • 73
274
votes
6 answers

React proptype array with shape

Is there a built-in way to use proptypes to ensure that an array of objects being passed to a component is actually an array of objects of a specific shape? Maybe something like this? annotationRanges: PropTypes.array(PropTypes.shape({ start:…
majorBummer
  • 6,357
  • 5
  • 29
  • 44
164
votes
4 answers

PropTypes in a TypeScript React Application

Does using React.PropTypes make sense in a TypeScript React Application or is this just a case of "belt and suspenders"? Since the component class is declared with a Props type parameter: interface Props { // ... } export class MyComponent…
Ralph
  • 29,142
  • 31
  • 124
  • 261
112
votes
5 answers

PropTypes in functional stateless component

Without using class, how do I use PropTypes in functional stateless component of react? export const Header = (props) => (
hi
)
Alan Jenshen
  • 2,569
  • 8
  • 18
  • 30
102
votes
4 answers

React PropTypes vs. Flow

PropTypes and Flow cover similar things but are using different approaches. PropTypes can give you warnings during runtime, which can be helpful to quickly find malformed responses coming from a server, etc. However, Flow seems to be the future and…
danielbuechele
  • 2,974
  • 2
  • 15
  • 28
86
votes
2 answers

React propTypes: objectOf vs shape?

What's the difference between PropTypes.objectOf and PropTypes.shape? In the PropTypes: // An object with property values of a certain type optionalObjectOf: PropTypes.objectOf(PropTypes.number) vs // An object taking on a particular…
DMac the Destroyer
  • 4,770
  • 5
  • 29
  • 54
73
votes
1 answer

React: PropTypes in stateless functional component

In React, I wrote a stateless functional component and now want to add Prop Type validation to it. List component: import React from 'react'; import PropTypes from 'prop-types'; function List(props) { const todos = props.todos.map((todo, index)…
Sven
  • 12,129
  • 25
  • 82
  • 140
56
votes
2 answers

react: why static propTypes

I am looking the redux todomvc codes. What is the static keyword in static propTypes? Thanks UPDATE No idea why downvoted? Is this post too simple? Comments are welcomed. Thanks. I hope I can delete this post.
BAE
  • 7,178
  • 12
  • 57
  • 136
34
votes
7 answers

Accessing PropTypes via the main React package is deprecated

I'm using redux but when I run my code I have this error: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead. I install npm i prop-types -S but I I still have the same…
Nedjim DN
  • 513
  • 2
  • 6
  • 12
34
votes
3 answers

React PropTypes DOM element?

How do I mark a property as having to be a DOM element? This page says that PropTypes.element is actually a React element, so what's the equivalent for DOM element?
mpen
  • 237,624
  • 230
  • 766
  • 1,119
34
votes
6 answers

How to test React PropTypes through Jest?

I'm writing Jest tests for my React code and hoping to make use of/test the PropType checks. I am quite new to the Javascript universe. I'm using npm to install react-0.11.2 and have a simple: var React = require('react/addons'); In my tests. My…
MichaelJones
  • 1,120
  • 1
  • 11
  • 21
30
votes
5 answers

React linter airbnb proptypes array

I have the following PropTypes: SmartTable.propTypes = { name: React.PropTypes.string.isRequired, cols: React.PropTypes.array.isRequired, rows: React.PropTypes.array.isRequired, }; but the linter says me: Prop type array is forbidden, how can…
FacundoGFlores
  • 6,508
  • 9
  • 53
  • 87
23
votes
2 answers

How do i pass eslint checking for this.props.navigation.navigate (react-navigation)?

I am using eslint airbnb in my react native project. The eslint throw error linting if i didn't validate the props, especially the props from react-navigation. How do i validate this using PropTypes? I am trying to validate it like…
dehamzah
  • 1,243
  • 1
  • 10
  • 18
21
votes
3 answers

Using forwardRef with proptypes and eslint

I am trying to use forwardRef for a Button in a project using eslint and prop-types. This is what I tried so far, and the errors I get each time: First attempt function Button ({ action = { callback: () => {}, title: 'unknown' } }, ref) { return…
Sharcoux
  • 4,282
  • 4
  • 29
  • 65
1
2 3
…
39 40