title: React: How to check if received props are undefined?
body: <p><strong><em>Hello and thank you for your time:</em></strong></p>
  
  <p>I am following the following tutorial:<a href="https://app.pluralsight.com/library/courses/react-flux-building-applications/table-of-contents" rel="noreferrer">https://app.pluralsight.com/library/courses/react-flux-building-applications/table-of-contents</a></p>
  
  <p>And currently I have detected that when you try to create an author, it tries to load current's author's URL's author id. Because of it is being created, it is undefined, and so then the create author functionality does not work.</p>
  
  <p>I have read some topics about checking undefined type both in JS and React:
  <a href="https://stackoverflow.com/questions/2647867/how-to-determine-if-variable-is-undefined-or-null">How to determine if variable is &#39;undefined&#39; or &#39;null&#39;?</a></p>
  
  <p><a href="https://stackoverflow.com/questions/40735406/checking-for-undefined-in-react">Checking for Undefined In React</a></p>
  
  <p><a href="https://github.com/facebook/react/issues/3725" rel="noreferrer">https://github.com/facebook/react/issues/3725</a></p>
  
  <p>And I have tried the following:</p>
  
  <p>In manageAuthorForm we pass in to the authorForm the author's state:</p>
  
  <pre><code>  render() {
          return (
              &lt;AuthorForm author={this.state.author}
                          onChange={this.setAuthorState}
                          onSave={this.saveAuthor}/&gt;
          );
      };
  </code></pre>
  
  <p>And then I have tried into the AuthorForm:</p>
  
  <pre><code>import React from 'react';
  import {Input} from "../common/textInput";
  import Link from "react-router-dom/es/Link";
  
  class AuthorForm extends React.Component {
      componentWillReceiveProps(nextProps) {
          if (nextProps.state.author === undefined) {
              this.props.author = {
                  author: {
                      id: '',
                      firstName: '',
                      lastName: '',
  
                  }
              };
          }
      }
  
      render() {
          return (
              &lt;form&gt;
                  &lt;h1&gt;Manage author&lt;/h1&gt;
                  &lt;Input
                      name="firstName"
                      label="First Name"
                      value={this.props.author.firstName}
                      onChange={this.props.onChange}
                  /&gt;
  
                  &lt;Input
                      name="lastName"
                      label="Last Name"
                      value={this.props.author.lastName}
                      onChange={this.props.onChange}
                  /&gt;
  
                  &lt;button type="submit" value="Save" className="btn btn-default" onClick={this.props.onSave}&gt;&lt;Link
                      to="/authors"&gt;Save
                      author&lt;/Link&gt;
                  &lt;/button&gt;
              &lt;/form&gt;
          );
      }
  }
  
  export {AuthorForm}
  </code></pre>
  
  <p>And it reports that nextProps are undefined:</p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'author' of undefined
      at AuthorForm.componentWillReceiveProps (authorForm.js:7)
      at callComponentWillReceiveProps (react-dom.development.js:6389)
      at updateClassInstance (react-dom.development.js:6575)
      at updateClassComponent (react-dom.development.js:7848)
      at beginWork (react-dom.development.js:8225)
      at performUnitOfWork (react-dom.development.js:10224)
      at workLoop (react-dom.development.js:10288)
      at HTMLUnknownElement.callCallback (react-dom.development.js:542)
      at Object.invokeGuardedCallbackDev (react-dom.development.js:581)
      at invokeGuardedCallback (react-dom.development.js:438)
      at renderRoot (react-dom.development.js:10366)
      at performWorkOnRoot (react-dom.development.js:11014)
      at performWork (react-dom.development.js:10967)
      at requestWork (react-dom.development.js:10878)
      at scheduleWorkImpl (react-dom.development.js:10732)
      at scheduleWork (react-dom.development.js:10689)
      at scheduleTopLevelUpdate (react-dom.development.js:11193)
      at Object.updateContainer (react-dom.development.js:11231)
      at react-dom.development.js:15226
      at Object.unbatchedUpdates (react-dom.development.js:11102)
      at renderSubtreeIntoContainer (react-dom.development.js:15225)
      at Object.render (react-dom.development.js:15290)
      at Object../src/index.js (index.js:17)
      at __webpack_require__ (bootstrap 78b34f0f34b98a41c613:678)
      at fn (bootstrap 78b34f0f34b98a41c613:88)
      at Object.0 (authorStore.js:39)
      at __webpack_require__ (bootstrap 78b34f0f34b98a41c613:678)
      at bootstrap 78b34f0f34b98a41c613:724
      at bootstrap 78b34f0f34b98a41c613:724
  componentWillReceiveProps @ authorForm.js:7
  callComponentWillReceiveProps @ react-dom.development.js:6389
  updateClassInstance @ react-dom.development.js:6575
  updateClassComponent @ react-dom.development.js:7848
  beginWork @ react-dom.development.js:8225
  performUnitOfWork @ react-dom.development.js:10224
  workLoop @ react-dom.development.js:10288
  callCallback @ react-dom.development.js:542
  invokeGuardedCallbackDev @ react-dom.development.js:581
  invokeGuardedCallback @ react-dom.development.js:438
  renderRoot @ react-dom.development.js:10366
  performWorkOnRoot @ react-dom.development.js:11014
  performWork @ react-dom.development.js:10967
  requestWork @ react-dom.development.js:10878
  scheduleWorkImpl @ react-dom.development.js:10732
  scheduleWork @ react-dom.development.js:10689
  scheduleTopLevelUpdate @ react-dom.development.js:11193
  updateContainer @ react-dom.development.js:11231
  (anonymous) @ react-dom.development.js:15226
  unbatchedUpdates @ react-dom.development.js:11102
  renderSubtreeIntoContainer @ react-dom.development.js:15225
  render @ react-dom.development.js:15290
  ./src/index.js @ index.js:17
  __webpack_require__ @ bootstrap 78b34f0f34b98a41c613:678
  fn @ bootstrap 78b34f0f34b98a41c613:88
  0 @ authorStore.js:39
  __webpack_require__ @ bootstrap 78b34f0f34b98a41c613:678
  (anonymous) @ bootstrap 78b34f0f34b98a41c613:724
  (anonymous) @ bootstrap 78b34f0f34b98a41c613:724
  </code></pre>
  
  <p>And in the web browser it reports:</p>
  
  <pre><code>×
  TypeError: Cannot read property 'author' of undefined
  AuthorForm.componentWillReceiveProps
  C:/Users/YonePC/WebstormProjects/flux/src/components/authors/authorForm.js:7
     4 | 
     5 | class AuthorForm extends React.Component {
     6 |     componentWillReceiveProps(nextProps) {
  &gt;  7 |         if (nextProps.state.author === undefined) {
     8 |             this.props.author = {
     9 |                 author: {
    10 |                     id: '',
  View compiled
  ▶ 15 stack frames were collapsed.
  This screen is visible only in development. It will not appear if the app crashes in production.
  Open your browser’s developer console to further inspect this error.
  </code></pre>
  
  <p>The full code, in github: <a href="https://github.com/YoneMoreno/ReactFluxAuthorsPageTutorial" rel="noreferrer">https://github.com/YoneMoreno/ReactFluxAuthorsPageTutorial</a></p>
  
  <p><strong>Could you help me, please?</strong></p>
  
  <p>Thank you ;=)</p>