onClick trigger click Error: current.click is not a function

Question

I am trying to trigger click button on another onClick event function.

Error : Uncaught TypeError: this.clickBack.current.click is not a function

React version is 16.8.6

constructor(props) {
    super(props)

    this.clickBack = React.createRef();
    this.startInterview = this.startInterview.bind(this);
}

startInterview(){
    console.log('hello') // output : hello
    console.log(this.clickBack.current); // output : Button {props: {…}, context: {…}, refs: {…}, updater: {…}, onClick: ƒ, …}
    this.clickBack.current.click(); // output : Uncaught TypeError: this.clickBack.current.click is not a function
}

In render -> return method

<Link to={backLink}>
    <Button ref={this.clickBack}> Back</Button>
</Link>
<Button onClick={this.startInterview}> Start Interview</Button>

Answer 1

as we can see in the console.log the ref is referencing the Button component, not a dom element.If this Button is a component you defined, you should pass your ref through a prop to the button dom element e.g.

<Button innerRef={this.clickBack}...>

Button.js

...
<button ref={this.props.innerRef}

(here innerRef is an arbitrary name)