React, get data attribute on select option

Question

Is it possible to set data attribute on a select option and if so how I can then get that value onChange

//pseudocode

const getColor = (dcolor) => {
    console.log(dcolor)
}

<select onChange={e => getColor(e.target.attributes.data-color)}>    
    <option value={'red'} data-color={'#FF0000'}>Red</option>
    <option value={'green'} data-color={'#00ff00'}>Green</option>
    <option value={'blue'} data-color={'#0040ff'}>Blue</option>
    <option value={'yellow'} data-color={'#ffff00'}>Yellow</option>
</select>

does this https://stackoverflow.com/a/43222753/9871756 answer your question — Abdullah Abid, Jul 26 '20 at 12:44

score 2 · Accepted Answer · answered Jul 26 '20 at 12:32

Not sure if there is anything more simple than that - but you could get the selectedIndex, use that to get the option, and use that to get the color:

onChange=(getColor)

const getColor = (e) => {
    const idx = e.target.selectedIndex;
    const option = e.target.querySelectorAll('option')[idx];
    const color = option.getAttribute('data-color');
    return color    
}

React, get data attribute on select option

1 Answers1