title: React - How to get parent attribute value in select drop down
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul&gt;
      {
          this.state.pics ? this.state.pics.map((pic, index) =&gt; {
              return (
                  &lt;li key={index}&gt;
                      &lt;img src={pic.url} height="200" alt="Image preview..." /&gt;
                      &lt;select data-id={index} onChange={this.setValue}&gt;
                          &lt;option value="1" &gt;Monday&lt;/option&gt;
                          &lt;option value="2"&gt;Tuesday&lt;/option&gt;
                          &lt;option value="3"&gt;Wednesday&lt;/option&gt;
                          &lt;option value="4"&gt;Thursday&lt;/option&gt;
                          &lt;option value="4"&gt;Friday&lt;/option&gt;
                          &lt;option value="4"&gt;Saturday&lt;/option&gt;
                          &lt;option value="4"&gt;Sunday&lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/li&gt;
              )
          }) : ""
      }
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>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</p>