How to create a link element dynamically and simulate click event react

Question

I am trying implement a function that takes url and navigates to the provided URL, from typescript function I am trying create a link object dynamically and simulate click event on the dynamic link? I have following code to create the link element not sure hot simulate the click

const openExternalLink = (linkAddress) => {
    const linkElement = React.createElement('a', {href: linkAddress},linkAddress);

    linkElement.click(); <-- ERROR
};

The above code not compiling following is the error message:

Property 'click' does not exist on type 'DetailedReactHTMLElement<{ href: string; }, HTMLElement>'.ts(2339)

Any idea how to simulate the click on a dynamically created UI element?

Ajay Gupta · Accepted Answer · 2022-02-05 05:11:47Z

0

please refer below code sample

let elem = React.createElement(
    this.props.tag,
    { 
        style: this.props.style,
        id: this.props.id
        onClick: () => {console.log('clicked')}
    },
    [this.props.text]
)

You could also pass a predefined function like below

let elem = React.createElement(
    this.props.tag,
    { 
        style: this.props.style,
        id: this.props.id
        onClick: this.handleClick.bind(this)
    },
    [this.props.text]
)

Credit :https://stackoverflow.com/a/55370859/13988407

answered Feb 5, 2022 at 5:11

Ajay Gupta

8617 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

softechie Over a year ago

Thank you for sharing the code, the problem i am having is to simulate the "click" event. This will create element and binds the click event, how to simulate the click event after creating the element?

Collectives™ on Stack Overflow

How to create a link element dynamically and simulate click event react

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related