George Mauer George Mauer - 3 months ago 7
React JSX Question

defaultValue change does not re-render input

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'))


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

Answer

You only specify its default value, but don't tell it to change its value with a change to props.

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

Will change the value when this.props.name changes.

http://output.jsbin.com/melitecimo