0

I have a <select> tag. The options for this tag are contained in an array. The values of this array are the fields I want to show to the user, and the index is the value I want to provide to my "onChange" function. So far, so good. However, when I open the popup containing the <select>, the default value is not the value I set.

I have tried setting defaultValue, value and I of course checked the value I wanted as default.

Here is a sample of what I mean:

options = ["string1", "string2", "string3", ...];
valueIWant = options[indexGivenToFunction];

(...)

<select name="content" defaultValue={valueIWant} onChange={this.changeContent}>
    { options.map((opt, index) => {
        return (
            <option value={ index } key={ opt }>{ opt }</option>
        );
    })}
</select>

I would like the defaultValue when opening my popup to be the one I set here. However, it seems to be set to the first value of my array.

A (very) wild guess I'm making is that because select doesn't allow any other fields than the ones it provides, and because when I set the defaultValue options.map isn't resolved yet, it ignores the value I give it, and instead takes the first option as entry for this field (as I said, just a guess). Am I right? And is there a way to bypass this behaviour to be able to set a defaultValue anyway?

Thanks for any help.

Ragnar
  • 88
  • 8
  • Have you tried `value` instead of `defaultValue`? – Anurag Srivastava May 17 '19 at 09:56
  • Possible duplicate of [ReactJs Select add default value](https://stackoverflow.com/questions/38943554/reactjs-select-add-default-value) – Anurag Srivastava May 17 '19 at 09:56
  • @Ragnar, Is not the value of an option an index of the array, while defaultValue as an item of that array? – Yozi May 17 '19 at 09:58
  • Is that your exact code? You have a typo, you set `valueIWant` to `option` not `options` with an "s". – sanjsanj May 17 '19 at 09:58
  • 1
    I guess either defaultValue should be an index too, or option's value should be an `opt` – Yozi May 17 '19 at 10:00
  • @AnuragSrivastava Yes I did. Didn't work. – Ragnar May 17 '19 at 10:03
  • @Yozi Yes it is, I'm working with the index to do my changes, but for the user it wouldn't be readable. I didn't even think about giving an index to default value, I'll try. Thanks. – Ragnar May 17 '19 at 10:03
  • @sanjsanj Not my code, but typo fixed, thanks! – Ragnar May 17 '19 at 10:03
  • @Yozi It worked, I was just tired I guess. However, I think using different values as display and *actual* value and trying to set a defaultValue as I did might throw off a few beginners such as me. Should I create an answer in case someone has the same issue? – Ragnar May 17 '19 at 10:05

2 Answers2

0

Use the * tagged line before map .

Your default value* { options.map((opt, index) => { return ( { opt }
Siddharth Naithani
  • 1
0

I think you're question is how to dynamically set default value for dropdown, and if this is your doubt then, Pseudocode:

let Quantity_array=[1,2,3,4,5,6,7];
//too render the option




    <select name={Quantity} value={Desired_number} id="Qty" >
{
    Quantity_array.map((number,index)=>{
        return(
        <option key={index} value={index}>{index}</option>

        )
    })
}
        </select>

Desired_number:-default value; note :to set default you can add selected attribute in option; and if the default value is dynamic then in selected={write condition for that} Or in select tag use value attribute and set Desired_number to make it default

Ankit singh
  • 1
  • 2