title: react-bootstrap edit input fields in a Modal after it's done displaying initial data
body: <p><code>TL DR</code> Summary: I have a table that shows a list of members. I click on a row and it renders a Modal with more info for that specific user. Now, I need to be able to edit the input fields within the Modal and save back in the DB.</p>
  
  <p><code>Full Scenario:</code></p>
  
  <p>I am using <code>react-bootstrap</code> to render a <code>Modal</code> for displaying additional data about the members that are initially displayed in an <code>HTML</code> table rows.</p>
  
  <p>When I click on the row, the <code>Modal</code> shows up and renders all additional details into the appropriate <code>input</code> fields.</p>
  
  <p>From a parent class (which is just a sibling class just above the <code>MemberModal</code>) I am rendering the <code>Modal</code> like this. The <code>selectedMember</code> state variable contains the user whose additional details needs to be displayed.</p>
  
  <pre><code>&lt;MemberModal
        show={this.state.showMemberModal}
        onHide={closeMemberModal}
        selectedmember={this.state.selectedMember}
  /&gt;
  </code></pre>
  
  <p>Here is my <code>MemberModal</code> class:</p>
  
  <pre><code>class MemberModal extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        firstName: "",
      };
    }
    componentDidMount() {
      this.setState({ member: this.props.selectedmember.firstName });
    }
    handleFirstNameChange = e =&gt; {
      this.setState({ firstName: e.target.value });
    };
  
    };
    render() {
      return (
        &lt;div className="static-modal"&gt;
          // Abstracted some Modal design JSX code .......
                  &lt;input
                    value={this.props.selectedmember.firstName}
                    type="text"
                    className="form-control"
                    id="FirstName"
                    aria-describedby="FirstName"
                    placeholder=""
                    name="email"
                    onChange={this.handleFirstNameChange}
                  /&gt;
                &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>The problem I am having is that the additional details show up in the <code>Modal</code> very accurately BUT I am not able to edit it. It probably is firing <code>onChange</code> every time I type in new characters/delete but the input field still maintains to show the old value it was loaded with.</p>
  
  <p><strong>Update 1:</strong> <a href="https://pastebin.com/StF3CXfk" rel="nofollow noreferrer">Pastebin Full Code</a></p>