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!

Answer 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()