Select value not changed on state update ReactJS

Question

I have no idea how to fix this thing have been spent more than an hours to solve this problem but none of the solution fix this

So i have a combo box (Select tag element) which i would like to change the value when a modal box is opened.

I have already implement defaultValue to set the value of the combobox but it won't change. However on other input such as the notes / amount it can get the defaultValue and set it to the element.

I have try to debug the this.currState.deposit_type_id and i get the right value

But in fact it won't change

it always refer to the default value

I have made several type of this thing but none of them has ever had this bug

Here's the screenshot for the code and the image

This is the code to pass the data from parent's component, and deposit type for all the value i will put on the combo box

This is the code that i used for set the default value when the modal box is opened

This is the result, it supposed to choose "Kas Besar", yet it choose "Deposit Type" instead

Possible duplicate of [How to get selected value of a dropdown menu in ReactJS](https://stackoverflow.com/questions/29108779/how-to-get-selected-value-of-a-dropdown-menu-in-reactjs) — Hemerson Carlin, Nov 12 '17 at 10:31
@mersocarlin yea i know bout that thing, i have already implement that, but the dropdown itself won't change — Jasson Harsojo, Nov 12 '17 at 15:04

Andrija Ćeranić · Accepted Answer · 2017-11-12T15:59:13.503

0

Not sure as I am not able to try it now but you could try to add your value argument for input's html like this:

value={ this.state.currData && this.state.currData.deposit_type_id  }

But it would be better to get currData from props. So this.props.currData.

edited Nov 12 '17 at 15:59

answered Nov 12 '17 at 11:10

Andrija Ćeranić

1,633
11
14

as far as i know we're not allowed to use value to set for the value, we should use defaultValue – Jasson Harsojo Nov 12 '17 at 15:05
You can use value, see https://reactjs.org/docs/forms.html#the-select-tag – Andrija Ćeranić Nov 12 '17 at 15:49
But you should not use your props in state like you did in componentWillMount. Use props in render function and initialize state in constructor function. – Andrija Ćeranić Nov 12 '17 at 15:50
But i need the value from my props to set the value on my state. Can i do that in my constructor? Get the props then set the state on constructor – Jasson Harsojo Nov 13 '17 at 04:46
Why do you need it that way? – Andrija Ćeranić Nov 13 '17 at 07:50
I want to set the props to the state so i can use that for the data i will send from the form – Jasson Harsojo Nov 13 '17 at 08:27
Just pass the props. No need to move them to state. – Andrija Ćeranić Nov 13 '17 at 08:32
it works ! Just to make it clear, your answer is to validate first whether currData is null or not, if it is not null then give the deposit_type_id? so what's the difference between value and defaultValue? As i have read, default value used to set initial value while value to set the value to the props – Jasson Harsojo Nov 14 '17 at 02:00

Select value not changed on state update ReactJS

1 Answers1