title: Hiding component vs handling props using componentWillRecieveProps in React
body: <p>I having a bootstrap modal component which contains a blog Form where we can either create a new blog or edit an existing blog. When I select a blog to edit then in modal component we call an ajax and then autofill the form data.</p>
  
  <p>My Parent Component looks like this.</p>
  
  <pre><code>class Dashboard extends React.Component {
    ...
    editSelectedBlog(blog){
      this.setState({ selectedBlog: blog, modalShown: true, blogEditing: true }, this.showModal)
    }
  
    showNewBlogModal() {
      this.setState({ modalShown: true, blogEditing: false }, this.showModal)
    }
  
    showModal() {
      $('#addBlog').modal('show')
    }
  
    hideModal(updateBlogs = false) {
      this.setState({ modalShown: false, blogEditing: false })
      if (updateBlogs) { // call ajax and fetch updated blogs }
    }
  
    render() {
      ...
      &lt;Blogs&gt;
        {blogs.map((blog) =&gt; {
          return (
            &lt;Blog
              key={shortid.generate()}
              blog={blog}
              onEditItem={this.editSelectedBlog}
            /&gt;
          )
        }
        )}
      &lt;/Blogs&gt;
      {modalShown &amp;&amp;
        &lt;BlogModal
          postApi={someUrl}
          selectedBlogId={this.state.selectedBlog? this.state.selectedBlog.id : undefined}
          onModalHide={this.hideModal}
  
        /&gt;
      }
      &lt;div role="presentation" onClick={this.showNewBlogModal} &gt; Add new blog
      &lt;/div&gt;
    }
  }
  </code></pre>
  
  <p>My blog modal Component looks like this.</p>
  
  <pre><code>class BlogModal extends React.Component {
    ...
    componentWillMount() {
      if(selectedBlogId){ // call ajax for blog using blog id and set blog form data }
    }
  
    render() {
      const isEditing = this.props.selectedBlogId !== undefined
      return (
        ....
        {isEditing ? (
            &lt;button type="button" onClick={this.editSelectedBlog}&gt;Update&lt;/button&gt;
          ) : (
            &lt;button type="button" onClick={this.addNewBlog}&gt;Save&lt;/button&gt;
          )
        }
      )
    }
  
  BlogModal.defaultProps = {
    blog: {
      title: '',
      date: '',
      content: ''
    }
  }
  </code></pre>
  
  <p>Is this way of hiding modal and then calling ajax in <code>componentWillMount</code> method is recommended or should I remove the <code>modalShown</code> condition and always keep the modal and then handle ajax request for editing in <code>componentWillRecieveProps</code> method of <code>BlogModal</code>?</p>