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

reactjs tutorial
react js example
create react app
react native
redux
react js examples for beginners
jsx
react get

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.


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

React (web framework), The latest Tweets from React (@reactjs). React is a declarative, efficient, and flexible JavaScript library for building user interfaces. Find Learn Reactjs Discover More At Faqtoids. Learn Reactjs


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

React (@reactjs), ReactJS - Overview - ReactJS is JavaScript library used for building reusable UI components. According to React official documentation, following is the  Master React, a Javascript library used on on major sites like Facebook. Start now!


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.

ReactJS - Overview, Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java  TheAnswerHub is a top destination for finding answers online. Browse our content today! Find reactjs course on TheAnswerHub.com.


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

React Tutorial, Utilize ReactJS components like JSX to build powerful interactive applications with this popular JavaScript library. React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. Declarative views make your code more predictable and easier to debug.


ReactJS Tutorial Part I: Learn ReactJS For Free, A declarative, efficient, and flexible JavaScript library for building user interfaces. reactjs.org · MIT License · 151k stars  ReactJS.NET makes it easier to use Facebook's React and JSX from C# and other.NET languages, focusing specifically on ASP.NET MVC (although it also works in other environments). It supports both ASP.NET 4 (with MVC 4 or 5), and ASP.NET Core MVC. It is cross-platform and can run on Linux via Mono or.NET Core.


facebook/react: A declarative, efficient, and flexible , pt-PT.reactjs.org. (Work in progress) React documentation website in Portuguese (Portugal) portugal. JavaScript CC-BY-4.0 12 16 2 5 Updated in 2 hours  React is a front-end library developed by Facebook. It is used for handling the view layer for web and mobile apps. ReactJS allows us to create reusable UI components. It is currently one of the most popular JavaScript libraries and has a strong foundation and large community behind it.


React Community · GitHub, React (also known as React.js or ReactJS) is a JavaScript library developed by Facebook for building user interfaces. It uses a declarative, component-based  ReactJS is JavaScript library used for building reusable UI components. According to React official documentation, following is the definition − React is a library for building composable user interfaces. It encourages the creation of reusable UI components, which present data that changes over time.