How do I retrieve select option data-attribute value in ReactJS?

Question

I have been trying different ways to retrieve the data-attribute value from a select option. I've tried these but everything comes up null. Any help appreciated.

handleChange(event) { 
    console.log("order by: ", event.target.attributes.getNamedItem('data-order'));
}


render() {

    var options = [];
    this.props.items.map((item) => {
        options.push(<option value={item.value} key={item.label} data-order={item.order}>{item.label}</option>);
     });

    return (
        <div>
            <label>Filter Single Select</label>
            <div>
                <select className="form-control" onChange={this.handleChange} value={this.props.sortBy}>
                    {options}
                </select>
            </div>
        </div>
    );
}

Answer 1

Your code is not working because e.target is returning the whole select field and not the individual option. You need to get the index of the selected option and then access that custom attribute. In your change function, this will work:

event.target[event.target.selectedIndex].getAttribute('data-order')