How to put 'selected' on <option>?

[jkleiser]

I'm struggling with a very basic problem. I have created a <select> with a few <option> elements, but I cannot figure out how to make a certain <option> the selected one. I have a function that generates the <option> element, and it currently looks like this:

const renderMyOption = (obj, selNo, i) =>
  selNo == i ?
    <option value={i} selected>{obj.title}</option> :
    <option value={i}>{obj.title}</option>

I have also tried to put the condition and the selected inside the <option>, but I have found no way that works.

[yysun]

selected=true

On Sat, Dec 18, 2021 at 12:06 PM Jon Kleiser @.***> wrote:

I'm struggling with a very basic problem. I have created a with a few elements, but I cannot figure out how to make a certain

the selected one. I have a function that generates the element, and it currently looks like this: const renderMyOption = (obj, selNo, i) => selNo == i ? {obj.title} : {obj.title} I have also tried to put the condition and the selected inside the , but I have found no way that works. — Reply to this email directly, view it on GitHub , or unsubscribe . Triage notifications on the go with GitHub Mobile for iOS or Android . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

jkleiser commented 2 years ago

What confused me was that the selected attribute did not show when I inspected the elements in my browser (Brave and Safari). A little more testing, however, showed that manipulating my selNo in the state actually caused my <select> to respond correctly. I have now put the condition inside my <option> like this:

const renderMyOption = (obj, selNo, i) =>
  <option value={i} selected={selNo == i}>{obj.title}</option>

yysun commented 2 years ago

Sounds good.

On Sun, Dec 19, 2021 at 3:16 AM Jon Kleiser @.***> wrote:

What confused me was that the selected attribute did not show when I inspected the elements in my browser (Brave and Safari). A little more testing, however, showed that manipulating my selNo in the state actually caused my

to respond correctly. I have now put the condition inside my like this:

const renderMyOption = (obj, selNo, i) => <option value={i} selected={selNo == i}>{obj.title}

— Reply to this email directly, view it on GitHub https://github.com/yysun/apprun/issues/127#issuecomment-997348424, or unsubscribe https://github.com/notifications/unsubscribe-auth/AABJUM7BXGXYRTELXP5MFX3URWIGLANCNFSM5KK2T62Q . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

You are receiving this because you commented.Message ID: @.***>

[jkleiser]

What confused me was that the selected attribute did not show when I inspected the elements in my browser (Brave and Safari). A little more testing, however, showed that manipulating my selNo in the state actually caused my <select> to respond correctly. I have now put the condition inside my <option> like this:

const renderMyOption = (obj, selNo, i) =>
  <option value={i} selected={selNo == i}>{obj.title}</option>

[yysun]

Sounds good.

On Sun, Dec 19, 2021 at 3:16 AM Jon Kleiser @.***> wrote:

What confused me was that the selected attribute did not show when I inspected the elements in my browser (Brave and Safari). A little more testing, however, showed that manipulating my selNo in the state actually caused my