React: DefaultValue is empty :(

[kevenjesus]

Hello everybody okay?

I have quite a strange problem, when seto a value in the "defaultValue" nothing appears, however if I set a value using "value" appears, the props is coming with the data correctly, I have no idea what it is

my react conde http://jsbin.com/losugiqoje/2/edit?html,js,output

[zpao]

Your code there doesn't run so it's a bit tricky to actually see the problem.

My gut is that you're expecting defaultValue to work across multiple renders. It does not. It is only used on the initial render. Rerendering with different props or state will not update the actual DOM node. Take a look at our docs on controlled components.

[kevenjesus]

I'm sorry,
I'll explain how it works my structure:

the "modal" component receives a props where the value is a state of the component "AppNotas", when I click on a link that is in the "Collapse" run a function of "AppNotas" that makes a change in state that is rightly the props of "modal" bringing only 1 object to the model.

This props the "modal" appears anywhere in the render, however in the form fields (input for example) using the defaultValue it does not appear the data, but if I only use the value he appears, if I set a value in the defaultValue he appears, one thing that does not appear in the defaultvalue is the value of the props

[zpao]

It sounds like the props are empty on first render? Since we only look at defaultValue on initial render if this.props.dados.titulo is empty on that first render, we'll never populate the form.

I really think you want to make use of controlled inputs here. I meant to paste the link last time - http://facebook.github.io/react/docs/forms.html#controlled-components

[kevenjesus]

Yes initially the props "dados" is empty, but the form does not appear too, when I click to open the modal the props is updated and receives the due value ...

the big problem is not the props, because if I display it anywhere appears normal, even if I set the input with value

<input type="text" value={this.a props. data. title} /> Ok appears the value.
<input type= "text" defaultValue={this.a props. data. title }/> doesn't show the value

[zpao]

You're right that the big problem is not props BUT it's important to understand that the fact that props change is the reason you are having a problem.

Yes, the first code you wrote will update the value when props are updated. This is because value makes the input controlled (see docs). The second line of code will not update. _defaultValue is only looked at on first render_. So the first render will see that this.props.whatever.title is empty and set the value to that. The 2nd render (when the props are updated) will not even look at this.props.whatever.title.

There's a misunderstanding happening here but no bug with React so I'm going to close this out.

[kevenjesus]

OMG Sorry Paul

Solution:
I'm using ref in input and componentDidUpdate to value in input

Thank you very much

[HarishBalagoni]

use componentWillMount(){ this.setState({key:this.props.defaultvalue});}
then render with <
defaultValue={this.key}>

[dpz3579]

@kevenjesus..
Hi it will be very helpful if you can provide a code snippet for the same, as how you achieved it.

Since we are also using the _modal_,
it loads defaultValue in _First run_, and in _Second time_ opening modal it does not set the value.
As the defaultValue binding works default.

I did understand that we have to use _ref_ for my input type to bind values.

but how will _componentDidUpdate_ work.
what handling you did in that function.

Appreciate your help.