CODEWITHSUNDEEP
reactjs
Kyle Laster
Kyle Laster

Reputation: 407

Why does createRef() returns current: null?

I am trying to use createRef to get access to the clientHeight property of several images. However, everytime I console.log the "this.imageRef" the return is {current:null}. My react is 16.7. What am I not seeing?

Additionally, PictureForGrid is a component I am using to just render and eventually add the clientHeight to state. It is called by Parent. I will include both, but I think you just need the PictureForGrid.

Component in Question import React from 'react';

class PictureForGrid extends React.Component {
constructor(props) {
    super(props);

    this.imageRef = React.createRef();
}


componentDidMount() {
    console.log(this.imageRef.current);
    console.log(this.imageRef);
}


render() {

    return (
        <div>
            <img href={this.imageRef} src={this.props.source} alt= 
{this.props.description} />
        </div>
    )
}
}

export default PictureForGrid;

The Parent Component

import React from 'react';

import PictureForGrid from '../PictureForGrid';
import '../../styles/Parent.css'
import one from '../../pics/one.jpg'
import two from '../../pics/two.jpg'
.
.
. 
.
import fourteen from '../../pics/Alyssa and Ryne/fourteen.jpg'

class Parent extends React.Component {
render() {
    return (
        <div className="picture-grid">
            <PictureForGrid source={one} description="erin working"/>
            <PictureForGrid   source={two} description="hands holding lamp" 
/>
            <PictureForGrid   source={three} description="chapel" />
            <PictureForGrid   source={four} description="dancing couple"/>
            <PictureForGrid   source={five} description="couple holding 
wedding sign"/>
            <PictureForGrid  source={six} description="couple at steeple"/>
            <PictureForGrid  source={seven} description="post wedding"/>
            <PictureForGrid  source={eight} description="groomsmen"/>
            <PictureForGrid  source={nine} description="bridal party"/>
            <PictureForGrid  source={ten} description="shower"/>
            <PictureForGrid  source={eleven} description="flowers"/>
            <PictureForGrid  source={twelve} description="water fountain"/>
            <PictureForGrid  source={thirteen} description="rings"/>
            <PictureForGrid  source={fourteen} description="ceremony"/>
        </div>
    )
}
}

export default Parent;

Thanks for any advice, as I am obviously new to this.

Upvotes: 3

Views: 771

Answers (1)

Hemadri Dasari
Hemadri Dasari

Reputation: 33984

You have a typo

Change

<img href={this.imageRef} src={this.props.source} alt= 
{this.props.description} />

To

<img ref={this.imageRef} src={this.props.source} alt= 
{this.props.description} />

Upvotes: 1

Related Questions