title: Why my this.props.data coming undefined anywhere before render function?
body: <p>Data is passing from parent to child accordingly hence its showing inside render function but I am unable to use that to a async function which I need to run before the render. </p>
  
  <p>If you see the <code>data.title</code> and <code>data.link</code> all showa under the render function but for some reason they are showing this error:</p>
  
  <p><code>×
  TypeError: Cannot read property 'link' of null</code></p>
  
  <p>What can I alternatively do?</p>
  
  <pre><code> export default class Highlight extends Component {
  
  state = {
      htmlString: ''
  }
  
   fetchActivity = () =&gt; {
  
      axios({
          method: 'post',
          url: 'api/singleactivity',
          data: { activityLink: "http://play.fisher-price.com" + this.props.data.link }
      })
          .then((res) =&gt; {
              this.setState({
                  htmlString: res.data
              })
          })
          .catch((err) =&gt; {
              console.log('There was an error fetching data', err);
          })
  
  }
  
  componentDidMount() {
      this.fetchActivity()
  }
  
   render() {
  
      if (this.props.visibility.highlight) {
  
          return (
              &lt;div&gt;
                  &lt;section className="card bg-info"
                      aria-label="Book Detail"&gt;
                      &lt;div className="bg-secondary"&gt;
                          &lt;h2&gt;{this.props.data.title}&lt;/h2&gt;
                          &lt;h2&gt;{this.props.data.link}&lt;/h2&gt;
                          &lt;h2&gt;{this.props.data.imageLink}&lt;/h2&gt;
                      &lt;/div&gt;
                      &lt;br /&gt;
                      &lt;div className="row" dangerouslySetInnerHTML={{ __html: this.state.htmlString }}&gt;
                      &lt;/div&gt;
                      &lt;br /&gt;
                      &lt;div className="bg-warning"&gt;
                          {!this.props.visibility.favorites ?
                              &lt;button onClick={() =&gt; this.addToFavorites()}&gt; Favorite&lt;/button&gt; :
                              &lt;button onClick={() =&gt; this.removeFromFavorites()}&gt; Remove&lt;/button&gt;}
                      &lt;/div&gt;
                  &lt;/section&gt;
                  &lt;br /&gt;
              &lt;/div&gt;
          )
      } else {
          return null;
      }
  
  }
  </code></pre>