ReactJS: How to get the value of a dynamically added custom data attribute

Question

Here is my (partial) code so far:

<select value={this.state.selectValue} onChange={this.handleChange}>
        <option data-peopleid='' value=''>Select an option</option>
        {film.map(({ url, title, characters }) => (
          <option key={url} data-peopleid={characters.map(val => {let x=val.split("/"); return x[x.length-1]})} value={title}>{title}</option>
          ))}
 </select>

The DOM is rendered like this

<select>
   <option data-peopleid="" value="">Select a movie</option>
   <option data-peopleid="1,2,3,4" value="A New Hope">A New Hope</option>
   <option data-peopleid="2,3,6,7,10,11,20,21" value="Attack of the Clones">Attack of the Clones</option>
   <option data-peopleid="2,3,10,11,16,20" value="The Phantom Menace">The Phantom Menace</option>
   <option data-peopleid="1,2,3,4,5,6,7" value="Revenge of the Sith">Revenge of the Sith</option>
   <option data-peopleid="1,2,3,4,5,10,13" value="Return of the Jedi">Return of the Jedi</option>
   <option data-peopleid="1,2,3,4,5,10" value="The Empire Strikes Back">The Empire Strikes Back</option>
   <option data-peopleid="1,3,5,13,14,27" value="The Force Awakens">The Force Awakens</option>
</select>

I am having some difficulties getting the data attribute "peopleid" onChange event of select box. The values in the data-peopleid attribute is dynamically added from data returned by an API.

Here is the handleChange function where I am trying to get attribute value.

handleChange(event) {
    this.setState({selectValue: event.target.value});
    console.log('U selected ', event.target.value); // This works
    console.log('People ID ', event.target.getAttribute('data-peopleid')); // Print null
    console.log('People ID ', event.target.dataset.peopleid); // Print undefined

}

I have tried different options as mentioned in this post, but none works.

Any help/pointers are very appreciated. Thanks

score 1 · Accepted Answer · answered Jul 28 '19 at 03:07

event.target returns the select, not an individually selected option thus you need to get the selected option to retrieve the data value of selected option.

  function handleChange(event) {
    const movieName = event.target.value;
    const peopleid = 
      //             ....  .....
      event.target[event.target.selectedIndex].getAttribute("data-peopleid");

    console.log(`"${movieName}" ➡ peopleid: ${peopleid}`);
  }

In the code above, event.target[event.target.selectedIndex] will give you the selected option, from which you can get the data-peopleid attribute from.

And the result would look like below.

You can try out the demo here.

score 0 · Answer 2 · answered Jul 28 '19 at 03:34

You can use selectedIndex to get the selected option node, then get the attribute of it.

handleChange = event => {
    this.setState({selectValue: event.target.value});
    const selectedIndex = event.target.selectedIndex;
    console.log(
        event.target.options[selectedIndex].getAttribute("data-peopleid")
    );
};

ReactJS: How to get the value of a dynamically added custom data attribute

2 Answers2