React - How to get parent attribute value in select drop down

Question

<ul>
    {
        this.state.pics ? this.state.pics.map((pic, index) => {
            return (
                <li key={index}>
                    <img src={pic.url} height="200" alt="Image preview..." />
                    <select data-id={index} onChange={this.setValue}>
                        <option value="1" >Monday</option>
                        <option value="2">Tuesday</option>
                        <option value="3">Wednesday</option>
                        <option value="4">Thursday</option>
                        <option value="4">Friday</option>
                        <option value="4">Saturday</option>
                        <option value="4">Sunday</option>
                    </select>
                </li>
            )
        }) : ""
    }
</ul>

On every change, I would like to get the value of data-id attribute which is nothing but value of index . or is there a way to directly access the value of key attribute of li . I am using react . Also is it a good practice in react to directly access the dom by query selector

Possible duplicate of [JavaScript: How to get parent element by selector?](https://stackoverflow.com/questions/14234560/javascript-how-to-get-parent-element-by-selector) — Andrea Carraro, Nov 29 '17 at 18:30

score 1 · Answer 1 · answered Nov 29 '17 at 18:40

1

const setValue = (e) => {
 console.log(e.target.getAttribute('data-id'))
}

The onChange callback gets the normal javascript event object which can be used to access the attribute you want.

answered Nov 29 '17 at 18:40

Shriharsha KL

317
1
2
11

score 0 · Accepted Answer · answered Nov 30 '17 at 13:41

Apart from pure JS based solutions of accessing the DOM via event APIs (in your case), you can also use the Refs feature of React

But as the docs themselves say

Avoid using refs for anything that can be done declaratively.

In your case, accessing the select element's custom attributes are pretty straightforward

Create a ref to the element you wish to access the DOM
Assign it to a variable which is accessible in your event callback
Access the variable ,which has the DOM reference in your function.

<select ref={select => (this.selectElement = select)} data-id={1} onChange={this.setValue}>

A sample can be found here in the CodeSandox link

And to answer your other question "Also is it a good practice in react to directly access the dom by query selector" - I'd say use that as a last resort , most of the problems can be solved by moving around props and states in component heirarchy.

React - How to get parent attribute value in select drop down

3 Answers3