title: Bring div element to front with zindex in React
body: <p>I'm having the hardest time getting this to work. I went from an async event handler to the current function. Currently what ends up happening is if you select an element that is last in the parent div it ends up having the same zIndex, still having the other element placed on top.</p>
  
  <p>I'm basically trying to make sure my if statement makes sure the element I click ends up having the the highest zIndex. This is my whole component code, the main function to look at is <code>onStart</code>. I'm leaving it a mess in hopes someone can understand what I'm trying to accomplish and help me out:</p>
  
  <pre><code>import React, {Component} from 'react'
  import Draggable from 'react-draggable'
  import Router from 'next/router'
  
  
  import {
    BrowserFrame, 
    DragHandle,
    BrowserContent 
  } from './styles'
  
  class DesktopBrowser extends Component {
  
    constructor(props) {
      super(props)
      this.state = {
        highestIndex: 0
      }
    }
  
    findHighestZIndex(elem) {
  
      let elems = document.getElementsByClassName(elem);
  
  
      let highest = 0;
  
      for (let i = 0; i &lt; elems.length; i++) {
        let zindex =document.defaultView.getComputedStyle(elems[i],null)
        .getPropertyValue("z-index");
  
        if ((zindex &gt; highest) &amp;&amp; (zindex != 'auto')) {
  
          this.setState({
            highestIndex: zindex
          })
  
        }
  
      }
  
  
  
  
    }
  
    onStart(e) {
  
      this.findHighestZIndex("react-draggable")
  
  
      if(this.state.highestIndex &gt;= 0) {
        console.log('greater than zero', this.state.highestIndex, e.currentTarget.style.zIndex)
        e.currentTarget.style.zIndex = (+this.state.highestIndex) + (+1)
        this.setState({
          highestIndex: (+e.currentTarget.style.zIndex) + 1
        })
      } else if (this.state.highestIndex &lt; e.currentTarget.style.zIndex) {
        console.log('lower')
        e.currentTarget.style.zIndex = (+this.state.highestIndex) + (+2)
      } else {
        console.log('catch')
      }
  
      // if(this.state.highestIndex &gt;= 0) {
  
      //   this.setState({
      //     highestIndex: (+this.state.highestIndex) + 1
      //   })
  
      //   e.currentTarget.style.zIndex = (+this.state.highestIndex) + 1
      //   console.log(e.currentTarget.style.zIndex)
  
      // } 
  
  
    }
  
  
  
  
    render() {
     return (
        &lt;Draggable 
          bounds="body"
          handle=".drag-handle"
          onStart={this.onStart.bind(this)}
          defaultPosition={
            {
              x: Math.floor(Math.random() * Math.floor(document.getElementsByClassName('content')[0].offsetWidth - 1000)), 
              y: Math.floor(Math.random() * Math.floor(document.getElementsByClassName('content')[0].offsetHeight - 500)) 
            }
          }&gt;
        &lt;BrowserFrame&gt;
          &lt;DragHandle className="drag-handle" /&gt;
          &lt;BrowserContent bg={this.props.content.image}&gt;
            &lt;button onClick={(e) =&gt; {
              e.preventDefault()
              Router.push(`/portfolio/${this.props.content.slug}`)
            }}&gt;View&lt;/button&gt;
          &lt;/BrowserContent&gt;
  
        &lt;/BrowserFrame&gt;
        &lt;/Draggable&gt;
      )
    }
  }
  
  export default DesktopBrowser
  </code></pre>