Using dynamic onClick with ref

Question

Passing a dynamic property on onClick() by the use of ref gives me back: TypeError: _this.listReference is null listReference is defined in my component.

In Component #1

class Component1 extends Component {
    constructor(props){   
        super(props)
        this.listReference= null;
}
//Returns
<div>
  <SomeComponent list={(ref) => 
    this.listReference= ref} />
  <Component2 onMarkerClick = {(index) => {                
    this.listReference.scrollTop = 48 * index
   }}/>

In Component #2

render() {
const {classes, driversStore, onMarkerCLick} = this.props

...

{driversStore.sortedSelectedOrders.map((order , index) => {
      return (
         <Component3 onClick={() => 
          onMarkerClick(index)} />

In Component #3


  render() {
    const { onClick } = this.props;
    return (
      <div
        onClick={onClick}>

I expect upon click to trigger the scroll functionality (as Stated in Component #1). Thanks in advance!

Did you forget doing this.listReference = React.createRef(); in your constructor and referring it somewhere in your component as return <div ref={this.listReference} />; ? — G_S
– G_S, Commented Mar 27, 2019 at 8:54
Please create a Minimal, Complete, and Verifiable example so that it will be easier for someone to help you. — Tholle
– Tholle, Commented Mar 27, 2019 at 8:58
@G_S I have refered it. (forgot to include it in the code) ill edit my code so you can check again. thanks — Sarkis
– Sarkis, Commented Mar 27, 2019 at 9:10

Hardik Chaudhary · Accepted Answer · 2019-03-27 10:10:10Z

1

Check this example. Hope it can help you!

const Component2 = (props) =>(
  <button onClick={props.onClick}>click me</button>
);

const SomeCompo = (props) =>(
  <div>SomeComponent</div>
);

class Component1 extends React.Component{
    listReference = React.createRef();
  
    render(){
      return(
        <div>
          <SomeCompo list={this.listReference}>reference</SomeCompo>
          <Component2 onClick={this.handleClick} />
        </div>
      );
    }
    
    handleClick = () => {
    
      if(this.listReference){
       this.listReference={scrollTop:100};
      }
      console.log(this.listReference)
    }
}

ReactDOM.render(<Component1/>,document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

You should do the following in constructor,

this.listReference = React.createRef()

edited Mar 27, 2019 at 10:10

answered Mar 27, 2019 at 8:59

Hardik Chaudhary

1,2281 gold badge10 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sarkis Over a year ago

Hey. I tried this.listReference = {} in return the console doesnt respond when i click. so its being rendered as empty

Hardik Chaudhary Over a year ago

Check the example if it can help you!

Sarkis Over a year ago

Thanks alot for your Support!

Collectives™ on Stack Overflow

Using dynamic onClick with ref

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related