title: React stateless component with controlled form Elements?
body: <p>I have a dumb/stateless component which is used to only render a form ,</p>
  
  <p>just a typical form .  </p>
  
  <pre><code>import React from 'react'
  
  export const AuthorForm = 
  ({ firstName , lastName , handlefnChange , handlelnChange}) =&gt; (
    &lt;form action=""&gt;
      &lt;h2&gt;Manage Authors&lt;/h2&gt;
      &lt;label htmlFor="firstName"&gt;First Name&lt;/label&gt;
      &lt;input type="text" name="firstName" 
        value={firstName} onChange={handlefnChange} /&gt;
      &lt;br/&gt;
      &lt;label htmlFor="lastName"&gt;Last Name&lt;/label&gt;
      &lt;input type="text" name="lastName" 
        value={lastName} onChange={handlelnChange} /&gt;
      &lt;br/&gt;
      &lt;input type="submit" value="save" /&gt;
    &lt;/form&gt;
  )
  </code></pre>
  
  <p>I'm controlling this form from the parent smart component </p>
  
  <p>which is just rendering the upper form component passing down 
  props for values and event handlers</p>
  
  <pre><code>import React , {Component} from 'react'
  import {AuthorForm} from './'
  
  export class ManageAuthors extends Component {
    constructor(){
      super()
      this.state = {
        author:{
          id: "",
          firstName:"", 
          lastName:""
        }
      }
    }
  
    handlefnChange = e =&gt; {
      this.setState({
        author:{
          firstName: e.target.value
        }
      })
    }
  
    handlelnChange = e =&gt; {
      this.setState({
        author: {
          lastName: e.target.value
        }
      })
    }
  
    render = () =&gt; (
      &lt;div&gt;
      &lt;AuthorForm 
        {...this.state.author}
        handlefnChange={this.handlefnChange} 
        handlelnChange={this.handlelnChange} /&gt;
      &lt;/div&gt;
    )
  }
  </code></pre>
  
  <p>everything works fine but I'm getting this warning </p>
  
  <p><code>warning.js:36 Warning: AuthorForm is changing a controlled input of type text to be uncontrolled. Input elements should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://facebook.github.io/react/docs/forms.html#controlled-components</code></p>
  
  <p>can I resolve this warning without converting to <code>stateful</code> component ?</p>