reactjs


React stateless component with controlled form Elements?


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.

Related Links

Reference to theme's primary color instead of a specific color in Material UI
How to set checked on item in DetailsList control
Accessible file upload in React (no drag/drop, no jQuery)
Snapshot testing ChartJS components with Jest
How do I get scss working with a react project?
Cannot read property “charAt” of undefined
SPClientPeoplePicker is undefined using SPF'x
React: To put simple logic in Container or Presentational component?
ReactJs - How to get updated state while inside a thunk promise
Syntax error on comonent proxy
TypeScript custom declaration files for untyped npm modules
React native ex-navigation chnaging routers
React and Authorization using an API
electron not allowed to load local resource
How to use jsx-control-statements in reactjs?
Leaflet with Webpack: error in css-loader

Categories

HOME
qlikview
actionscript-3
logging
oop
typo3
display
mingw
sugarcrm
kohana
symfony-3.2
hibernate-mapping
software-collections
segmentation-fault
google-search-appliance
suitecrm
websharper
hdf5
hapijs
beacon
xforms
mattermost
pushbullet
handle
visual-studio-community
request-uri
oracle-nosql
luhn
ansible-inventory
campaign-monitor
abide
extern
scip
gem-fury
office-interop
intervention
jks
anonymous-function
activeandroid
google-chrome-storage
xmldom
cloudconvert
sharpdevelop
critical-section
msiexec
directinput
eclipse-mars
xcode7.1
mod
salesforce-service-cloud
apache2-module
gtkwave
mojolicious
windows-kernel
serial-communication
persian
jain-sip
eaaccessory
valdr-bean-validation
sicstus-prolog
jad
random-access
yosemite
cocos2d-x-2.x
oxygenxml
angular-file-upload
cs193p
rda
hotlinking
dayofweek
google-voice
mobile-robots
typography
azure-scheduler
simplemembership
string-length
rfc822
tasklist
webpage-screenshot
optimistic-concurrency
utm
flexbuilder
recess
object-tag
n2
conditional-operator
activescaffold
linq-to-mysql
mysql-pconnect
morfik
vista64
software-update
memory-consumption

Resources

Encrypt Message