0

I've been trying to log my event object value in 'option' tag and it does not work, but it does work in select tag, here is my code:

{data.map((item, index) => {
      const {name, options} = item;
          return (
              <div className="item" key={name}>
                  <label htmlFor={name}>
                      Select any {name}:
                      <select name={name} id={name} onClick={(e) => console.log(e.target.value)}>
                          <option disabled selected>Any {name}</option>
                          {options.map((item, index) => {
                              return (
                                  <option 
                                      value={item} 
                                      key={index} 
                                      onClick={(e) => console.log(e.target.value)}
                                  >{item}</option>
                              )
                          })}
                      </select>
                  </label>
              </div>
          )
      })}

what's wrong with my option tag?

Saimur Rahman
  • 31
  • 1
  • 6
  • Are you expecting the event to fire each time you change the value? Or when you click the select-input and the pop-up opens? – Phoenix1355 Mar 05 '21 at 09:01
  • Same question as @Phoenix1355 asked. Do you want the console to log on change or on user click? – Near Mar 05 '21 at 09:05
  • yes I want the event to fire each time I click on each option – Saimur Rahman Mar 05 '21 at 09:07
  • 1
    Maybe you want to take a look at https://stackoverflow.com/questions/3487263/how-to-use-onclick-or-onselect-on-option-tag-in-a-jsp-page or this (it says that `option` does not trigger `onClick` in chrome) https://stackoverflow.com/questions/22482842/the-onclick-event-does-not-work-for-options – Stefan Mar 05 '21 at 09:34
  • 1
    please refer to this question https://forum.freecodecamp.org/t/react-onclick-does-not-work-with-option-tag/235939/3 – Baskaran Ajiharan Mar 05 '21 at 10:08

1 Answers1

1

I don't think there is anything wrong with your option tag. Did you encounter this issue in Chrome?

This seems to be a known issue in Chrome: The onclick event does not work for options

Indeed, I tried onClick with both Chrome and Firefox - for the option tag, onClick does fire in Firefox but not in Chrome.

Sreekar Reddy
  • 11
  • 1