Fire event listener on element not rendered in React

Question

I have added an external script to my index.html that renders a widget inside my react component (it will render the widget where ever I wanted to. It's not a reacting component.). I'm trying to render the widget inside the id renderDivHere.

handleClick() {
  console.log("clicked on widget button")
}

render () {
  <div>
    ......
    ......
    <div id="renderDivHere" />  // the external scripts will render the widget here
    ......
  </div>
}

The widget contains some graphs, data and a button with id="wl-nav-button". I want to listen the click events in #wl-nav-button and call this.handleClick() function.

I tried jquery.click() and document.getElementById(wl-nav-button).addEventListener("click", function(){this.handleClick()});. But both are returning errors.

Help me out on this issue.

Webpack bundling returns error. Module build failed: SyntaxError: Unexpected token, expected ( (74:10) on document.get... — Syam Pillai
– Syam Pillai, Commented Jun 29, 2017 at 8:53
@FelixHäberle checked that link. But I can't give an onClick in the element as it's creating dynamically by the widget script — Syam Pillai
– Syam Pillai, Commented Jun 29, 2017 at 8:55

Community · Accepted Answer · 2020-06-20 09:12:55Z

3

Try with the following code:

componentDidMount() {
  document.addEventListener("click", this.navButtonListener);
}

componentWillUnmount() {
  document.removeEventListener("click", this.navButtonListener);
}

navButtonListener = (e) => {
  if(e.target.id == "wl-nav-button"){
    this.handleClick();
  }
}

What this does is it adds an event listener to the entire document, which is fired anytime you click. Then, a check is done to see what the clicked items id attribute is set to. If the id is your button, it fires the handleClick() function.

This also removes the event listener from your component before un-mounting it.

Demo

Here is a simple demo that just demonstrates how to add an event handler in React to something that was not rendered with React.

class MyApp extends React.Component {

  componentDidMount() {
    document.addEventListener("click", this.navButtonListener);
  }

  componentWillUnmount() {
    document.removeEventListener("click", this.navButtonListener);
  }

  navButtonListener = (e) => {
    if (e.target.id == "wl-nav-button") {
      this.handleClick();
    }
  }
  
  handleClick() {
    console.log("click!!");
  }

  render() {
    return (
      <div>
        <p>A button from a simulated external non-react library will be inserted asynchronically below:</p>
        <div id="my-container"></div>
      </div>
    );
  }
}

ReactDOM.render(<MyApp />, document.getElementById("myApp"));

//simulate a non-react library asynchronically inserting into the DOM:
setTimeout(function() {
  var button = document.createElement("BUTTON");
  var text = document.createTextNode("Click me!");
  button.appendChild(text);
  button.setAttribute("id", "wl-nav-button");
  document.getElementById("my-container").appendChild(button);
}, 2000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="myApp"></div>

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jun 29, 2017 at 8:58

Chris

59.7k20 gold badges121 silver badges144 bronze badges

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

2 Comments

Syam Pillai Over a year ago

working perfectly here. But returning some errors in my code. Uncaught TypeError: this.handleClick is not a function. checking the issue. Will update in some time

Syam Pillai Over a year ago

My bad. Made navButtonListener into an arrow function. Now working like charm. Thanks :)

Collectives™ on Stack Overflow

Fire event listener on element not rendered in React

1 Answer 1

Demo

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Demo

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related