How to click automatically in a button when user coming to page

import React from "react";

checkClick = () => {
  console.log("clicked");
};

class Test extends React.Component {
  render() {
    return (
      <div>
        <button id="button" onClick={this.checkClick}>
          click
        </button>
      </div>
    );
  }
}

export default Test;

How to click automatically on a button when user coming to page?

Here I want to click automatically above button.

I tried with:

document.getElementById("button").click()

which does not work.

First of all, I do not recommend you to create functions outside of React component class. In your case, you are not able to use it like this.checkClick because the checkClick function is declared outside of your React component.

The second thing, working with real DOM inside of React is basically, let's say, antipattern. React provides virtual DOM and works with it, so, I recommend you to learn about React ref API.

For your case, you can use the lifecycle componentDidMount() method. It is being called (AUTOMATICALLY, for sure) when the component has finished its first render, so, all refs are already available here and all children elements are beind mounted and present in DOM.

import React from "react"

export default class Test extends React.Component {
  componentDidMount() {
    document.getElementById("button").click()
  }

  checkClick() {
    console.log("clicked!")
  }

  render() {
     return (
       <div>
         <button id="button" onClick={this.checkClick}>click</button>  
       </div>
     )
  }
}

or, using refs

import React from "react"

export default class Test extends React.Component {
  componentDidMount() {
    this.button.click()
  }

  checkClick() {
    console.log("clicked!")
  }

  render() {
     return (
       <div>
         <button ref={button => this.button = button} onClick={this.checkClick}>click</button>  
       </div>
     )
  }
}