title: How to get element margin in React JS
body: <p>I'm trying to create an slider in React.</p>
  
  <p>My component is as follows : </p>
  
  <pre><code>outterDivStyles() {
          return {
              position: "relative",
              width: "100%",
              overflow: "hidden",
              height: this.props.height || 200
          }
      }
  
  innerDivStyles(){
      return {
          position: "absolute",
          top: 0,
          left: this.state.left,
          right: 0,
          width: "1000%",
          transition: "left .5s",
          transitionTimingFunction: "ease"
      }
  }
  
  renderArrows(){
      return (
          &lt;div className="next-prev" style={{height: this.props.height || 200}}&gt;
              &lt;div onClick={this.prevSlide.bind(this)}&gt;&lt;img src={images.slider_arrow_left_png} /&gt;&lt;/div&gt;
              &lt;div onClick={this.nextSlide.bind(this)}&gt;&lt;img src={images.slider_arrow_right_png} /&gt;&lt;/div&gt;
          &lt;/div&gt;
      )
  }
  
  
  render(){
  return(
  &lt;div&gt;
      &lt;div ref="detailsOutterDiv" className="detailsOutterDiv" style={this.outterDivStyles()}&gt;
           &lt;div ref="detailsInnerDiv" className="detailsInnerDiv" style={this.innerDivStyles()}&gt;
                {this.carInfo().photos.map((p, i) =&gt; {
                    return (
                        &lt;div key={i} className="slide"&gt;&lt;img src={p.image_url}/&gt;&lt;/div&gt;
                    );
                 })}
           &lt;/div&gt;
           {this.renderArrows()}
      &lt;/div&gt;
  &lt;/div&gt;
  )
  }
  </code></pre>
  
  <p>The css is as follows : </p>
  
  <pre><code>.slide{
    margin-right: 15px;
    display: inline-block;
  }
  
  .slide img{
    width: 100%;
    height: auto;
  }
  
  
  @media (min-width: 1599px) {
    .detailsOutterDiv .detailsInnerDiv div{
      width: (10% / 3);
  
    }
  }
  </code></pre>
  
  <p>Now I'm trying to get width plus margin of the div with class <code>slide</code>.</p>
  
  <p>I try to do it with : </p>
  
  <p><code>let slideWidth = this.refs["detailsInnerDiv"].childNodes[0].style.marginRight;</code></p>
  
  <p>But <code>slideWidth</code> is 0.</p>
  
  <p>Any advice?</p>