DefaultValue change does not redraw input

Question

I have no idea why this is not working

Demo

I have the following es6 code

const {createFactory, createClass, DOM: { label, input, button }} = React; const tester = createFactory(createClass({ render() { return label({} ,`Name: ${this.props.name}` ,input({defaultValue: this.props.name}) ,button({onClick: this.changeName}, "Change") ) }, changeName() { this.setProps({name: "Wilma"}) } }) ) React.render(tester({name: "Fred"}), document.querySelector('body')) 

Pressing the button clearly changes the props, but the old defaultValue is still in the input! So what gives? What am I doing wrong? this is mistake? Is there a workaround?

Answer 1

You indicate only its default value, but do not tell him about a change in its value with a change in props.

 ,input({value: this.props.name}) 

The value will be changed when this.props.name is changed.

http://output.jsbin.com/melitecimo

Answer 2

I found what seems like a pretty good solution: use key prop to force the rendering of a completely new input .

In my specific case, I do not need input controlled using its own onChange prop, since the form environment ultimately controls the state inside some store that defaultValue fills. But the state of the repository can be asynchronously initialized / updated, in which case defaultValue must be updated. So here is a concise version of my specific case:

 import React, { PropTypes } from 'react'; import { Form } from 'provide-page'; const GatherContact = ({ classes, onSubmit, movingContactName, movingContactEmail, movingContactPhone, userName, userEmail, userPhone }) => ( <Form onSubmit={onSubmit}> <div className={classes.GatherContact}> <h2 className={classes.GatherHeading}> How can we contact you? </h2> <input type="text" className={classes.GatherContactInput} placeholder="Name" name="movingContactName" key={`movingContactName:${movingContactName || userName}`} defaultValue={movingContactName || userName} required={true} /> <input type="email" className={classes.GatherContactInput} placeholder="Email" name="movingContactEmail" key={`movingContactEmail:${movingContactEmail || userEmail}`} defaultValue={movingContactEmail || userEmail} required={true} /> <input type="tel" className={classes.GatherContactInput} placeholder="Phone" name="movingContactPhone" key={`movingContactPhone:${movingContactPhone || userPhone}`} defaultValue={movingContactPhone || userPhone} required={true} /> {userName ? undefined : ( <input type="password" className={classes.GatherContactInput} placeholder="Password" name="userPassword" required={true} autoComplete="new-password" /> ) } </div> </Form> ); GatherContact.propTypes = { classes: PropTypes.object.isRequired, onSubmit: PropTypes.func.isRequired, movingContactName: PropTypes.string.isRequired, movingContactEmail: PropTypes.string.isRequired, movingContactPhone: PropTypes.string.isRequired, userName: PropTypes.string.isRequired, userEmail: PropTypes.string.isRequired, userPhone: PropTypes.string.isRequired }; export default GatherContact;