I'm trying to get the element height via ref using React JS, but without success.

I have something like this :

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

            <div ref="bigScreenDetails" className="bigScreenDetails">
               <div className="carDetailsBigScreen">
                    <CarDetails carID={this.state.carID}/>
               </div>
            </div>
        </div>
    );
}

And in ponentDidMount I try to do it as follows :

ponentDidMount(){
    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
}

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.

Any ideas?

console.log(carRef) inside render returns

"car-20"
"car-21"
"car-22"
.......
"car-35"

And console.log(carRef) inside ponentDidMount returns

"car-22"

But if I console.log(this.refs) in ponentDidMount I get :

Thus only two refs insted of three.

UPDATE

As if there is absolutely no ref inside

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

                         </div>
                     );
                  })}

Here is the console log :

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);

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

I'm trying to get the element height via ref using React JS, but without success.

I have something like this :

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

            <div ref="bigScreenDetails" className="bigScreenDetails">
               <div className="carDetailsBigScreen">
                    <CarDetails carID={this.state.carID}/>
               </div>
            </div>
        </div>
    );
}

And in ponentDidMount I try to do it as follows :

ponentDidMount(){
    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
}

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.

Any ideas?

console.log(carRef) inside render returns

"car-20"
"car-21"
"car-22"
.......
"car-35"

And console.log(carRef) inside ponentDidMount returns

"car-22"

But if I console.log(this.refs) in ponentDidMount I get :

Thus only two refs insted of three.

UPDATE

As if there is absolutely no ref inside

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

                         </div>
                     );
                  })}

Here is the console log :

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);

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

• javascript
• reactjs

• is your car.id ing from db? This could mean that it is an int and not a string, which means that this.refs[carRef] is actually returning this: 'car' 22 – Chaim Friedman Commented Nov 25, 2016 at 15:47
• @usedToBeFat I checked it. It is "car-22". – Boky Commented Nov 25, 2016 at 15:48
• In your render method let carRef = "car-" + car.id; can you log this carRef and see what it returns? – Chaim Friedman Commented Nov 25, 2016 at 15:52
• I updated my question. – Boky Commented Nov 25, 2016 at 16:01

1 Answer 1

Ideally, avoid using refs in the first place...

If you need to use them for some reason, I'd remend using the callback style. This will allow you to use references to the elements themselves, rather than messing around with strings.

Looking at the docs, I'm not even sure whether string refs are supported any more...

If I were you (and I was definitely sure I needed all these refs) I'd do something like this:

cars.map(car => (
    <div ref={ref => this.carRefs[car.id] = ref} key={car.id}>
    </div>
))

In your constructor, you can assign this.carRefs = {};.

Now you can access your cars in the this.carRefs object from inside ponentDidMount.

class TestComponent extends React.Component {
    constructor() {
      super();
      this.carRefs = {};
    }

    ponentDidMount() {
      console.log(this.carRefs);
    }

    render() {
        return (<div>
          {this.props.cars.map(({id}) =>
            <div key={id} ref={ref => this.carRefs[id] = ref}></div>)}
        </div>);
    }
}
        
const cars = [{id: 1}, {id: 2}];
ReactDOM.render(<TestComponent cars={cars} /> , document.getElementById("root"));

<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>