CODEWITHSUNDEEP
reactjs
Arnald
Arnald

Reputation: 53

Cannot read property 'array' of undefined

So I am following a react tutorial on props validation and I am trying to display different types of data on a web page and I am getting an error saying that array is undefined

TypeError: Cannot read property 'array' of undefined

import React from 'react';
import logo from './logo.svg';
import './App.css';

class App extends React.Component {
  render() {
  return (
    <div>

      <img src={logo} className="App-logo" alt="logo" />
       <h3>Array:{this.props.thisArray}</h3>
       <h3>Bool:{this.props.thisBool ? 'True':'False'}</h3>
       <h3>Func:{this.props.myFunction(4)}</h3>
       <h3>Number:{this.props.thisNumber}</h3>
       <h3>String:{this.props.thisString}</h3>
       <h3>Object:{this.props.thisObject.name}</h3>
    </div>

  );
}
}
App.mytypes = {
  thisArray: React.PropTypes.array.isRequired,
  thisBool: React.PropTypes.bool.isRequired,
  myFunction: React.PropTypes.func,
  thisNumber: React.PropTypes.number,
  thisString: React.PropTypes.string,
  thisObject: React.PropTypes.object

}
App.showValues = {
  thisArray: [2,4,6,8,10],
  thisBool: 'True',
  myFunction: function(r){ return r},
  thisNumber: 45,
  thisString: "Ki be pakoli",
  thisObject: {
     name:"Bilu"
  }
}
export default App;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.production.min.js"></script>

Upvotes: 0

Views: 1398

Answers (2)

akshay kishore
akshay kishore

Reputation: 1027

You need to import proptypes as

import PropTypes from 'prop-types';

Plus you need to use it as

App.propTypes  = {
  thisArray: PropTypes.array.isRequired,
  thisBool: PropTypes.bool.isRequired,
  myFunction: PropTypes.func,
  thisNumber: PropTypes.number,
  thisString: PropTypes.string,
  thisObject:PropTypes.object

}

Upvotes: 2

Auticcat
Auticcat

Reputation: 4489

I think the problem comes from

React.PropTypes.array.isRequired

Import the PropTypes from:

import PropTypes from 'prop-types';

And change React.PropTypes.array.isRequired to PropTypes.array.isRequired

Upvotes: 0

Related Questions