Material-ui: TextField defaultValue prop not being set on re-render

[coniel]

If I set the defaultValue of a TextField to a state param e.g:

<TextField defaultValue={this.state.defaultValue} ... />

It doesn't set the defaultValue prop when re-rendering due to a state change. If I set an initial value in getIntialState then it shows the initial value, but does not update when re-dendering. The floating label however does go into the active position (as if it had a value).

[KaiHufenbach]

This is standard behaviour: It is only useful for setting value initially. =)
Please refer controlled vs. uncontrolled components: https://facebook.github.io/react/docs/forms.html

So you should use the following pattern:

onChangeFunction(component, value){
    this.setValue({value:value});
}

<... value = {this.state.value} onChange={this.onChangeFunction} .../>

When you are loading content asynchronously you either have to keep track of the value on your own (controlled component) or attach the component after the content is loaded (by using the state to check whether loading is complete).

[coniel]

Ah, I had a feeling I was doing something wrong (I'm new to React). Thanks for the help!

[codeVerine]

Will this work now? We will not get component and value in the handler, right ? And the this is not bound too.

[oliviertassinari]

Will this work now?

@codeVerine No it doesn't. Have a look at @KaiHufenbach comment. We won't fix it.

[drojas]

@codeVerine You can include your desired default value on the key prop and it will be rendered again. It's hacky but so far it works well when you can't go with controlled mode.

[ORESoftware]

Given this thread, wondering if anyone could solve this problem a different way? Would it possible to conditionally render either value or defaultValue?

https://stackoverflow.com/questions/41116891/conditionally-add-remove-property-from-element-with-react

Please see question on SO, thanks

[ORESoftware]

@drojas can you give an example of what you just mentioned? "You can include your desired default value on the key prop and it will be rendered again. It's hacky but so far it works well when you can't go with controlled mode." I don't quite follow, code would help thanks. I think I understand, but I don't know if that key prop methodology would work for other elements besides TextField would it?

[drojas]

Hi @ORESoftware I've been using props like these:

By doing this, when the defaultValue changes my react node will have a different key prop and therefore a new component will be mounted to replace the previous one. It can lead to leaking memory for sure and I've not tested that matter so my advice is to go with fully controlled mode if you still can.

[ChinW]

@codeVerine I was waiting for this answer for so long, lol, thx

[abdulhadi1995]

@drojas i was going nuts over this thank you so much.!