Why I can't get element by ref in React
<p>I'm trying to get the element height via ref using React JS, but without success.</p>

<p>I have something like this : </p>

<pre><code>render() {
    let cars = carData.filterCars(this.props.carsToShow, this.props.filters);
    return (
        &lt;div&gt;
            &lt;div className="carList"&gt;
                &lt;div className="cars" ref="cars"&gt;
                    {cars.map((car, i) =&gt; {
                        let carRef = "car-" + car.id;
                        return (
                           &lt;div ref={carRef} key={i}&gt;
                               &lt;div&gt;
                                   &lt;div&gt;&lt;img src={car.image_url} /&gt;&lt;/div&gt;
                                   &lt;div className="carNameAndDesc"&gt;
                                        &lt;div&gt;{car.make} {car.model}&lt;/div&gt;
                                        &lt;div&gt;{car.price}&lt;/div&gt;
                                   &lt;/div&gt;
                               &lt;/div&gt;
                             &lt;/div&gt;
                         );
                      })}
                 &lt;/div&gt;
            &lt;/div&gt;

            &lt;div ref="bigScreenDetails" className="bigScreenDetails"&gt;
               &lt;div className="carDetailsBigScreen"&gt;
                    &lt;CarDetails carID={this.state.carID}/&gt;
               &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    );
}
</code></pre>

<p>And in componentDidMount I try to do it as follows : </p>

<pre><code>componentDidMount(){
    let carRef = "car-" + this.props.carID;  //22
    let refs = this.refs[carRef].offsetHeight; //undefined
    let refs1 = this.refs["cars"].offsetHeight; //900
    let refs2 = this.refs["bigScreenDetails"].offsetHeight; //1400
}
</code></pre>

<p>I can't get ref of the div inside map. Only for that ref I get undefined, for other refs I get the right values.</p>

<p>Any ideas?</p>

<p>console.log(carRef) inside render returns </p>

<pre><code>"car-20"
"car-21"
"car-22"
.......
"car-35"
</code></pre>

<p>And console.log(carRef) inside componentDidMount returns</p>

<pre><code>"car-22"
</code></pre>

<p>But if I <code>console.log(this.refs)</code> in componentDidMount I get :</p>

<p><a href="https://i.stack.imgur.com/qK6uw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qK6uw.png" alt="enter image description here"></a></p>

<p>Thus only two refs insted of three.</p>

<p><strong>UPDATE</strong></p>

<p>As if there is absolutely no ref inside</p>

<pre><code>{cars.map((car, i) =&gt; {
                    let carRef = "car-" + car.id;
                    return (
                       &lt;div ref={carRef} key={i}&gt;

                         &lt;/div&gt;
                     );
                  })}
</code></pre>

<p>Here is the console log :</p>

<pre><code>let carRef = "car-" + carID;
    let refs = this.refs;
    let one = ReactDOM.findDOMNode(this.refs[carRef]);
    let two = this.carRefs;

    console.log("All refs : " + refs);
    console.log("Vikramaditya : " + one);
    console.log("Tom : " + two);
</code></pre>

<p>In first console.log I should see all three refs, but I see only two of them.</p>

<p><a href="https://i.stack.imgur.com/zrIGD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zrIGD.png" alt="enter image description here"></a></p>