React propTypes outside Component

Question

I was into functional Javascript previously, Recently I started with Object oriented Javascript and React Library. This question is more of understanding the code.

Why below code don't work

class MyComponent extends React.Component{ propTypes : { name: React.PropTypes.string.isReequired, location: React.PropTypes.string } render(){ return( <h1>Hello This is {this.props.name} and I live in {this.props.location}</h1> ); } } ReactDOM.render( <MyComponent name="Node" location="DOM"/>, document.getElementById('root') );

Whereas this code works,

class MyComponent extends React.Component{ render(){ return( <h1>Hello This is {this.props.name} and I live in {this.props.location}</h1> ); } } MyComponent.propTypes = { name: React.PropTypes.string.isReequired, location: React.PropTypes.string } ReactDOM.render( <MyComponent name="Node" location="DOM"/>, document.getElementById('root') );

Can someone help me understand this? Thanks.

Mayank Shukla · Accepted Answer · 2017-06-17 04:37:36Z

You need to use static word (to define the static property) because, propTypes need to be declared on the class itself, not on the instance of the class , and use =.

Check the DOC.

Like this:

static propTypes = { name: React.PropTypes.string.isRequired, location: React.PropTypes.string }

Tyler Sebastian · Accepted Answer · 2017-06-17 04:38:43Z

Inside an ES6 class, static properties look like this

class X extends Y { static staticThing = { ... } }

note the =

"assigning" a static property the ES5 way looks like the second way you have it there

Typically, you'll use the second way for functional components whereas you might as well use the first way (albeit properly with an =) for ES6 style class components.

also, make sure you have your React.PropTypes correct - isReequired should be isRequired

Collectives™ on Stack Overflow

React propTypes outside Component

2 Answers 2

1 Comment

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Related