title: Updating local state after component has rendered
body: <p>I'm creating a project-planning app using React, Redux, and Firebase. A single project record in my Firestore database contains a <strong>Title</strong> and some <strong>Content</strong>. When I go to update a project, I have the input fields' defaultValues set to the correct data for the project I want to edit. However, updating only works if I make changes to <strong>both</strong> the Content and Title input fields. Otherwise, upon submitting these values the data gets deleted because the local state has not seen any changes and therefore updates the untouched field to the empty string: <strong>""</strong> </p>
  
  <p>I have tried setting the local state of the EditProject component in the render method, but this is not possible:</p>
  
  <pre><code>render() {
      const { project, auth } = this.props;
      if (!auth.uid) return &lt;Redirect to="/signin" /&gt;;
      if (project) {
        this.setState({
          title: project.title,
          content: project.content
        });
  
  ...
  </code></pre>
  
  <p>I have also tried setting the state in during <code>componentDidMount</code> like so:</p>
  
  <pre><code>  componentDidMount = () =&gt;{
      const { project } = this.props;
      this.setState({
        title: project.title,
        content: project.content
      })
    }
  </code></pre>
  
  <p>But the issue with this is that the project prop does not get mapped by <code>mapStateToProps</code> before <code>componentDidMount</code></p>
  
  <p>Lastly, I've tried passing the project prop from the parent component, which is <code>projectDetails</code>, but I am unable to successfully do so. I might be doing this part wrong so please let me know if there is a good way to do this with the code I have. In <code>ProjectDetails</code>:</p>
  
  <pre><code>&lt;Link to={"/edit/" + docId} key={docId}&gt;
    &lt;button className="btn pink lighten-1 z-depth-0"&gt;Edit&lt;/button&gt;
  &lt;/Link&gt;
  </code></pre>
  
  <p>This links to the 'broken' EditDetails component I am trying to fix.</p>
  
  <p><br>
  <strong>Here is my code for the EditProject component</strong></p>
  
  <pre><code>class EditProject extends Component {
    state = {
      title: "",
      content: ""
    };
  
    handleChange = e =&gt; {
      this.setState({
        [e.target.id]: e.target.value
      });
    };
  
    handleSubmit = e =&gt; {
      e.preventDefault();
      let localProject = this.state;
      let docId = this.props.docId;
      this.props.editProject(localProject, docId);
      const projectDetailURL = "/project/" + docId;
      this.props.history.push(projectDetailURL);
    };
  
    render() {
      const { project, auth } = this.props;
      if (!auth.uid) return &lt;Redirect to="/signin" /&gt;;
      if (project) {
        return (
          &lt;div className="container section project-details"&gt;
            &lt;div className="card z-depth-0"&gt;
              &lt;div className="card-content"&gt;
                &lt;form onSubmit={this.handleSubmit} className="white"&gt;
                  &lt;h5 className="grey-text text-darken-3"&gt;Edit Project&lt;/h5&gt;
                  &lt;div className="input-field"&gt;
                    &lt;label htmlFor="title" className="active"&gt;
                      Title
                    &lt;/label&gt;
                    &lt;input
                      onChange={this.handleChange}
                      type="text"
                      id="title"
                      defaultValue={project.title}
                    /&gt;
                  &lt;/div&gt;
                  &lt;div className="input-field"&gt;
                    &lt;label htmlFor="content" className="active"&gt;
                      Edit Project Content
                    &lt;/label&gt;
                    &lt;textarea
                      id="content"
                      onChange={this.handleChange}
                      className="materialize-textarea"
                      defaultValue={project.content}
                    /&gt;
                  &lt;/div&gt;
                  &lt;div className="input-field"&gt;
                    &lt;button className="btn pink lighten-1 z-depth-0"&gt;
                      Update
                    &lt;/button&gt;
                  &lt;/div&gt;
                &lt;/form&gt;
              &lt;/div&gt;
              &lt;div className="card-action grey lighten-4 grey-text"&gt;
                &lt;div&gt;
                  Posted by {project.authorFirstName} {project.authorLastName}
                &lt;/div&gt;
                &lt;div&gt;{moment(project.createdAt.toDate()).calendar()}&lt;/div&gt;
                &lt;div className="right-align" /&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        );
      } else {
        return (
          &lt;div className="container center"&gt;
            &lt;p&gt;Loading project...&lt;/p&gt;
          &lt;/div&gt;
        );
      }
    }
  }
  
  const mapStateToProps = (state, ownProps) =&gt; {
    //id = the document id of the project
    const id = ownProps.match.params.id;
    const projects = state.firestore.data.projects;
    const project = projects ? projects[id] : null;
    return {
      project: project,
      auth: state.firebase.auth,
      docId: id
    };
  };
  
  const mapDispatchToProps = dispatch =&gt; {
    return {
      editProject: (project, docId) =&gt; dispatch(editProject(project, docId))
    };
  };
  
  export default compose(
    connect(
      mapStateToProps,
      mapDispatchToProps
    ),
    firestoreConnect([
      {
        collection: "projects"
      }
    ])
  )(EditProject);
  
  </code></pre>
  
  <p>Upon visiting the edit page, I would like the data to remain unchanged if a user does not make any changes to an input field.</p>