Keep Coding

I have a dumb/stateless component which is used to only render a form ,
just a typical form .
import React from 'react'
export const AuthorForm =
({ firstName , lastName , handlefnChange , handlelnChange}) => (
<form action="">
<h2>Manage Authors</h2>
<label htmlFor="firstName">First Name</label>
<input type="text" name="firstName"
value={firstName} onChange={handlefnChange} />
<br/>
<label htmlFor="lastName">Last Name</label>
<input type="text" name="lastName"
value={lastName} onChange={handlelnChange} />
<br/>
<input type="submit" value="save" />
</form>
)
I'm controlling this form from the parent smart component
which is just rendering the upper form component passing down
props for values and event handlers
import React , {Component} from 'react'
import {AuthorForm} from './'
export class ManageAuthors extends Component {
constructor(){
super()
this.state = {
author:{
id: "",
firstName:"",
lastName:""
}
}
}
handlefnChange = e => {
this.setState({
author:{
firstName: e.target.value
}
})
}
handlelnChange = e => {
this.setState({
author: {
lastName: e.target.value
}
})
}
render = () => (
<div>
<AuthorForm
{...this.state.author}
handlefnChange={this.handlefnChange}
handlelnChange={this.handlelnChange} />
</div>
)
}
everything works fine but I'm getting this warning
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
can I resolve this warning without converting to stateful component ?

This is because the author object loses either the firstName or lastName field when you modify either one of them:
handlefnChange = e => {
this.setState({
author: {
firstName: e.target.value
// lastName is missing!
}
});
}
handlelnChange = e => {
this.setState({
author: {
// firstName is missing!
lastName: e.target.value
}
})
}
React only does a merge on the top layer of this.state. Since firstName and lastName are nested inside an author object, when you do handlefn/lnChange and only set one of the fields, the other goes missing.
The fix would be to do:
handlefnChange = e => {
this.setState({
author: {
firstName: e.target.value,
lastName: this.state.author.lastName
}
});
}
handlelnChange = e => {
this.setState({
author: {
firstName: this.state.author.firstName,
lastName: e.target.value
}
})
}
Or if you have more than two fields in future, it would be easier to use the spread operator for merging:
handlefnChange = e => {
this.setState({
author: {
...this.state.author,
firstName: e.target.value,
}
});
}
handlelnChange = e => {
this.setState({
author: {
...this.state.author,
lastName: e.target.value
}
})
}
Or use a utility merge function from lodash.