title: ReactJS: TypeError: this.ref.current.method is not a function
body: <p>I need your help with to better understand the ref mechanism with ReactJS. I  made a custom component, and I'm trying to call a method of this component through a ref. However, I get this error that what I'm calling is not a function</p>
  
  <p>I've got a "sayHi" method in my custom component "CountryInput" only displaying "hi" with the console.log</p>
  
  <pre><code>class CountryInput extends React.Component {
    sayHi(){
      console.log('hi');
    }
  
    render() {
      return(
        &lt;h1&gt;hello&lt;/h1&gt;
      );
    }
  };
  </code></pre>
  
  <p>And this the component I used the ref in:</p>
  
  <pre><code>class MyComponent extends Component {
  constructor(props) {
      super(props);
      this.countryRef = React.createRef();
    }
  
    save(){
      this.countryRef.current.sayHi();
    }
  
    render() {
      const {address, classes}= this.props;
      return (
          &lt;React.Fragment&gt;
          &lt;CountryInput ref={this.countryRef} /&gt;
            &lt;Button className={classes.button} onClick={()=&gt;this.save()}&gt;
              Enregister
            &lt;/Button&gt;
          &lt;/React.Fragment&gt;
      );
    }
  </code></pre>
  
  <p>When I click on the button, I get this error:</p>
  
  <blockquote>
    <p>"TypeError: this.ref.current.sayHi is not a function"</p>
  </blockquote>
  
  <p>I really don't understand why. Can you help me?</p>