title: A component is changing a controlled input to be uncontrolled. This is likely caused by the value changing from a defined to undefined
body: <p>This is my ContactUs component</p>
  <pre><code>import React, { Component } from &quot;react&quot;;
  import { Button } from &quot;react-bootstrap&quot;;
  class ContactUs extends Component {
    constructor(props) {
      super(props);
      this.state = {
        contactUs: {
          telephone: &quot;&quot;,
          name: &quot;&quot;,
          emailAddress: &quot;&quot;,
        },
      };
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;h2&gt;Contact Us&lt;/h2&gt;
      &lt;div className=&quot;form-element&quot;&gt;
            &lt;label&gt;Name:&lt;/label&gt;
            &lt;input
              type=&quot;text&quot;
              id=&quot;name&quot;
              value={this.state.contactUs.name}
              onChange={this.handleFirstNameChange}
            /&gt;
          &lt;/div&gt;
          &lt;div className=&quot;form-element&quot;&gt;
            &lt;label&gt;Email:&lt;/label&gt;
            &lt;input
              type=&quot;email&quot;
              id=&quot;email&quot;
              value={this.state.contactUs.emailAddress}
              onChange={this.handleEmailChange}
            /&gt;
          &lt;/div&gt;
          &lt;div className=&quot;form-element&quot;&gt;
            &lt;label&gt;Telephone:&lt;/label&gt;
            &lt;input
              type=&quot;text&quot;
              id=&quot;telephone&quot;
              value={this.state.contactUs.telephone}
              onChange={this.handletelephoneChange}
            /&gt;
          &lt;/div&gt;
          &lt;Button onClick={this.sendEmail}&gt;Send Email&lt;/Button&gt;
        &lt;/div&gt;
      );
    }
  
    handleFirstNameChange = (event) =&gt; {
      this.setState({ contactUs: { name: event.target.value } });
    };
    handletelephoneChange = (event) =&gt; {
      this.setState({ contactUs: { telephone: event.target.value } });
    };
    handleEmailChange = (event) =&gt; {
      this.setState({ contactUs: { emailAddress: event.target.value } });
    };
  
   sendEmail = () =&gt; {
      console.log(&quot;Name is &quot; + this.state.contactUs.name);
      console.log(&quot;Email address is &quot; + this.state.contactUs.emailAddress);
      console.log(&quot;Telephone is &quot; + this.state.contactUs.telephone);
    };
  }
  
  export default ContactUs;
  </code></pre>
  <p>These are questions related to above component.</p>
  <ol>
  <li>When I add something to one of three elements in the component, I received following error. How can I get rid of the error?</li>
  </ol>
  <p><em>Warning: A component is changing a controlled input to be uncontrolled. This is likely caused by the value changing from a defined to undefined, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: <a href="https://reactjs.org/link/controlled-components" rel="noreferrer">https://reactjs.org/link/controlled-components</a></em></p>
  <ol start="2">
  <li>After I filled Name, telephone and email and press the button, I received following output.</li>
  </ol>
  <p>Name is undefined<br>
  Email address is undefined<br>
  Telephone is Test Telephone</p>
  <p>Why the output does not contain the values for Name and email address?</p>
  <p>Thanks in advance.</p>