title: I cannot update state with getDerivedStateFromProps
body: <p>In this edit class I fetch data from the server successfully and I used <code>getDerivedStateFromProps</code> to set the state initial values but when I try to edit any data nothing changed, <code>formdata</code> does not change. Why is that and what I should do to fix it?</p>
  
  <pre><code>import React, { PureComponent } from 'react'
  import {connect} from 'react-redux'
  import {Link} from 'react-router-dom'
  import {getBook, updateBook, clearBook, deleteBook} from '../../actions'
  
  class EditBook extends PureComponent {
  
      state = {
          formdata: {
              _id: this.props.match.params.id,
              name: '',
              author: '',
              review: '',
              pages: '',
              rating: 1,
              price: ''
          }
      }
  
      constructor(props) {
          super(props);
          this.props.dispatch(getBook(this.props.match.params.id));
      }
  
      handleInput = (e, name) =&gt; {
          let newFormdata = {...this.state.formdata}
          newFormdata[name] = e.target.value;
          this.setState({formdata: newFormdata});
      }
  
      submitForm = (e) =&gt; {
          e.preventDefault();
          this.props.dispatch(updateBook(this.state.formdata));
      }
  
      static getDerivedStateFromProps(nextProps, prevState) {
  
          let book = nextProps.book_reducer.book || '';
          return {
              formdata: {
                  name: book.name,
                  author: book.author,
                  review: book.review,
                  pages: book.pages,
                  rating: book.rating,
                  price: book.price
              }
          }
  
      }
  
      render() {
          //console.log(this.props);
          return (
              &lt;div className="rl_container article"&gt;
                  &lt;form onSubmit={this.submitForm}&gt;
                      &lt;h2&gt;Edit review&lt;/h2&gt;
                      &lt;div className="form_element"&gt;
                          &lt;input type="text" placeholder="Enter Name" value={this.state.formdata.name} onChange={(e) =&gt; this.handleInput(e, 'name')} /&gt;
                      &lt;/div&gt;
                      &lt;div className="form_element"&gt;
                          &lt;input type="text" placeholder="Enter Author" value={this.state.formdata.author} onChange={(e) =&gt; this.handleInput(e, 'author')} /&gt;
                      &lt;/div&gt;
                      &lt;textarea value={this.state.formdata.review} onChange={(e) =&gt; this.handleInput(e, 'review')} /&gt;
                      &lt;div className="form_element"&gt;
                          &lt;input type="number" placeholder="Enter Pages" value={this.state.formdata.pages} onChange={(e) =&gt; this.handleInput(e, 'pages')} /&gt;
                      &lt;/div&gt;
                      &lt;div className="form_element"&gt;
                          &lt;select value={this.state.formdata.rating} onChange={(e) =&gt; this.handleInput(e, 'rating')}&gt;
                              &lt;option val="1"&gt;1&lt;/option&gt;
                              &lt;option val="2"&gt;2&lt;/option&gt;
                              &lt;option val="3"&gt;3&lt;/option&gt;
                              &lt;option val="4"&gt;4&lt;/option&gt;
                              &lt;option val="5"&gt;5&lt;/option&gt;
                          &lt;/select&gt;
                      &lt;/div&gt;
                      &lt;div className="form_element"&gt;
                          &lt;input type="number" placeholder="Enter Price" value={this.state.formdata.price} onChange={(e) =&gt; this.handleInput(e, 'price')}/&gt;
                      &lt;/div&gt;
                      &lt;button type="submit"&gt;Update Review&lt;/button&gt;
                      &lt;div className="delete_post"&gt;
                          &lt;div className="button"&gt;Delete Review&lt;/div&gt;
                      &lt;/div&gt;
  
                  &lt;/form&gt;
              &lt;/div&gt;
          )
      }
  }
  
  function mapStateToProps(state){
      return {
          book_reducer: state.book_reducer
      }
  }
  
  export default connect(mapStateToProps)(EditBook)
  </code></pre>