ReactJS "TypeError: Cannot read property 'array' of undefined"

Question

While running this code I got error on the first line on App.propTypes

TypeError: Cannot read property 'array' of undefined

Code:

  class App extends React.Component {
   render() {
      return (
         <div>
            <h3>Array: {this.props.propArray}</h3>
            <h3>Array: {this.props.propBool ? "true" : "false"}</h3>
            <h3>Func: {this.props.propFunc(3)}</h3>
            <h3>Number: {this.props.propNumber}</h3>
            <h3>String: {this.props.propString}</h3>
            <h3>Object: {this.props.propObject.objectName1}</h3>
            <h3>Object: {this.props.propObject.objectName2}</h3>
            <h3>Object: {this.props.propObject.objectName3}</h3>
         </div>
      );
   }
}


App.propTypes = {
   propArray: React.PropTypes.array.isRequired, //I got error over here
   propBool: React.PropTypes.bool.isRequired,
   propFunc: React.PropTypes.func,
   propNumber: React.PropTypes.number,
   propString: React.PropTypes.string,
   propObject: React.PropTypes.object
}

App.defaultProps = {
   propArray: [1,2,3,4,5],
   propBool: true,
   propFunc: function(e){return e},
   propNumber: 1,
   propString: "String value...",

   propObject: {
      objectName1:"objectValue1",
      objectName2: "objectValue2",
      objectName3: "objectValue3"
   }
}

I tried to search but I didn't get the correct solution.

Im guessing your on React 16, PropTypes has been moved to another package called prop-types. - reactjs.org/warnings/dont-call-proptypes.html — Knut Erik Lødding
– Knut Erik Lødding, Commented Oct 13, 2017 at 5:06

Agney · Accepted Answer · 2017-11-24 04:35:53Z

32

Prop-Types are now a separately maintained library named prop-types Here is the explanation from react-docs: https://reactjs.org/docs/typechecking-with-proptypes.html

You have to import them as

import React from 'react';
import PropTypes from 'prop-types'

class App extends React.Component {
  //App here
}

App.propTypes = {
 propArray: PropTypes.array.isRequired, 
 propBool: PropTypes.bool.isRequired,
 propFunc: PropTypes.func,
 propNumber: PropTypes.number,
 propString: PropTypes.string,
 propObject: PropTypes.object
}

NPM Package

edited Nov 24, 2017 at 4:35

answered Oct 13, 2017 at 5:02

Agney

19.3k7 gold badges60 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Bhargav Chudasama Over a year ago

i also import PropTypes from 'prop-types'; but it didnt work

WilliamKF Over a year ago

Yes, same error after adding import PropTypes from 'prop-types';

bimal sharma Over a year ago

@WilliamKF remove React from App.propTypes. Your code become ` propArray: PropTypes.array.isRequired` and do same changes for every where

Andronicus · Accepted Answer · 2019-03-05 06:51:11Z

2

Change this:

App.propTypes = {
   propArray: React.PropTypes.array.isRequired, //I got error over here
   propBool: React.PropTypes.bool.isRequired,
   propFunc: React.PropTypes.func,
   propNumber: React.PropTypes.number,
   propString: React.PropTypes.string,
   propObject: React.PropTypes.object
}

to:

App.propTypes = {
  propArray: PropTypes.array.isRequired,
  propBool: PropTypes.bool.isRequired,
  propFunc: PropTypes.func,
  propNumber: PropTypes.number,
  propString: PropTypes.string,
  propObject: PropTypes.object
}`

edited Mar 5, 2019 at 6:51

Andronicus

26.2k18 gold badges55 silver badges92 bronze badges

answered Mar 5, 2019 at 6:34

Nitin Singh

211 bronze badge

Comments

WilliamKF · Accepted Answer · 2018-01-25 20:39:19Z

0

The React package no longer contains PropTypes. You need to install the prop-types package and

import PropTypes from 'prop-types';

Edit: As stated in the first paragraph in the documentation

React.PropTypes has moved into a different package since React v15.5. Please use the prop-types library instead.

edited Jan 25, 2018 at 20:39

WilliamKF

43.6k71 gold badges206 silver badges308 bronze badges

answered Oct 13, 2017 at 5:02

palsrealm

5,2531 gold badge22 silver badges25 bronze badges

Comments

harun ugur · Accepted Answer · 2019-10-11 13:39:50Z

0

You should change React.PropTypes.array.* to PropTypes.array.*

App.propTypes = {
   propArray: PropTypes.array.isRequired,
   propBool: PropTypes.bool.isRequired,
   propFunc: PropTypes.func,
   propNumber: PropTypes.number,
   propString: PropTypes.string,
   propObject: PropTypes.object,
	 headerProp: PropTypes.string,
	 contentProp: PropTypes.string
}
App.defaultProps = {
		headerProp: "Header from props...",
		contentProp:"Content from props...",
		propArray: [1,2,3,4,5],
		propBool: true,
		propFunc: function(e){return e},
		propNumber: 1,
		propString: "String value...",

		propObject: {
			objectName1:"objectValue1",
			objectName2: "objectValue2",
			objectName3: "objectValue3"
		}
}

answered Oct 11, 2019 at 13:39

harun ugur

1,87222 silver badges20 bronze badges

Comments

shlok mukkawar · Accepted Answer · 2023-12-15 05:50:24Z

0

So, It can happen in a lot of dependecies which are using React.PropTypes you can resolve this by importing

import PropTypes from 'prop-types'

and after that change React.PropType to just PropType.It happens because PropType is not default in react anymore you need to import it seperately.

Before cards: React.PropTypes.array.isRequired, After cards: PropTypes.array.isRequired,

Error I encountered which got resolved when i did this enter image description here

enter image description here

answered Dec 15, 2023 at 5:50

shlok mukkawar

261 silver badge3 bronze badges

Collectives™ on Stack Overflow

ReactJS "TypeError: Cannot read property 'array' of undefined"

5 Answers 5

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related