Cannot indirectly click a React component using React Refs (this.mycomponent.click()), getting the error that the element is undefined

Question

I do not understand what I am doing wrong. I am using react 16:

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

I am importing my script:

<script type="text/babel" src="/SiteAssets/my_script.js"></script>

and my_script.js is this

const FileReaderElement = React.createElement;

class FileReader extends React.Component {
  constructor() {
    super();
    this.my_csv_link = React.createRef();
    this.action = this.action.bind(this);
  }

  action(e) {
    e.preventDefault();
    this.my_csv_link.current.link.click();
  }

  render() {
    return (
    <div>
      <button onClick={this.action}>
        ExportTest
      </button>
      <ReactCSV.CSVLink ref={this.my_csv_link} data="test"/>
    </div>
    );
  }
}

const domContainer = document.querySelector('#container');
ReactDOM.render(FileReaderElement(FileReader), domContainer);

I am trying to click the CSVLink once indirectly from a button click. However I get the following error in the browser console:

Uncaught TypeError: Cannot read property 'click' of undefined

I have tried

 this.my_csv_link.current.link.click(); (Cannot read property 'click' of undefined)
 this.my_csv_link.link.click(); (Cannot read property 'click' of undefined)
 this.my_csv_link.click(); (this.my_csv_link.click is not a function)
 this.my_csv_link.current.click(); (this.my_csv_link.current.click is not a function)

with no success

I followed this documentation article: https://reactjs.org/docs/refs-and-the-dom.html and this similar example https://stackoverflow.com/a/53558566/1238675 to build my code.

What am I doing wrong?

Answer 1

Nothing I tried was working, so instead I gave the CSVLink component an id and I traditionally just did

document.getElementById("CSVLink").click()