React adding custom props to vanilla html elements

user_16790110 0
Viewed 74
      const handleChange = (e) => {
          console.log(e.target.id);
    };

    return (
      <div>
        <select onChange={(e) => handleChange(e)}>
          <option value="1-10" id="foo">
            1-10
          </option>

How can I make the id prop in the <option> tag accessible by the code above? e.target.id returns nothing, but e.target.value returns the selected value. How can I create these custom attributes with when using vanilla html elements?

reactjs javascript
3 Answers

e.target is the select, not the option. And since the select does not have an id, you are getting nothing. One way to achieve what you want is by doing so :

export default function App() {
  const handleChange = (e) => {
    const selectedOption = e.target.querySelector(`option[value='${e.target.value}']`);
    console.log(selectedOption.id);
  };
  return (
    <select onChange={(e) => handleChange(e)}>
      <option value="1-10" id="foo">
        1-10
      </option>
      <option value="1-11" id="bar">
        1-11
      </option>
    </select>
  );
}
user_152886410

One of the easiest method to achieve this is as follows:

const handleChange = (e) => {
    const index = e.target.selectedIndex;
    const id = e.target.childNodes[index].id;
    console.log(id); // logs 'foo' or 'bar' depending on selection
  };

  return (
    <div>
      <select onChange={(e) => handleChange(e)}>
        <option value="1-10" id="foo">
          1-10
        </option>
        <option value="11-20" id="bar">
          11-20
        </option>
      </select>
    </div>
  );
user_164288970

Here's another way to do so

import React from 'react';

const handleChange = (e) => {
  const index = e.target.selectedIndex;
  const el = e.target.childNodes[index]
  const option =  el.getAttribute('id'); 
  console.log(option)
};

export function App(props) {
  return (
    <div className='App'>
      <select onChange={(e) => handleChange(e)}>
        <option value="1-10" id="foo">
          1-10
        </option>
        <option value="2-10" id="zoo">
          2-10
        </option>
      </select>
    </div>
  );
}
user_149995990
Related