CODEWITHSUNDEEP
javascriptreactjs
kondziorf
kondziorf

Reputation: 137

React: "Prop or nothing" in component property

In Firefly example project there is this defaultValue line in PostForm component:

<Input
  type="text"
  name="title"
  defaultValue={this.props.post.title || ''}
  required
/>

I got an error while rendering this component when parent component isn't passing any prop 

TypeError: Cannot read property 'title' of undefined

When another component pass post prop it is fine. Why 

|| ''

doesn't work for situation without prop passing?

Upvotes: 1

Views: 120

Answers (1)

Tholle
Tholle

Reputation: 112807

That's because post is undefined if your don't pass it as a prop, which will give rise to your error when you do this.props.post.title.

You need to check that post exists in the props as well:

<Input
  type="text"
  name="title"
  defaultValue={this.props.post && this.props.post.title || ''}
  required
/>

Upvotes: 3

Related Questions