Can't Nest React Components Within Hammer

[choxi]

I'm trying to nest another React component within the Hammer component:

import React from "react"
import Hammer from "react-hammerjs"

class Note extends React.Component {
  render() {
    let style = { height: "50px", width: "50px", background: "blue" }

    return <div className="Note" style={ style } >
      { this.props.name }
    </div>
  }
}

export default class App extends React.Component {
  handleTap(...args) {
    alert("tap")
  }

  render() {
    return <Hammer onTap={ (...args) => this.handleTap(...args) }>
      <Note />
    </Hammer>
  }
}

... and I get this error:

It works fine unless I use another React component inside of <Hammer>.

[storrdev]

I believe I've found a possible work-around for now.

You will need to add the following method to your nested React component:

addEventListener(type, handler, useCapture) {
    this.el.addEventListener(type, handler, useCapture);
}

and make sure to add the ref to the nested component's root element:

ref={el => this.el = el}

I haven't tested it thoroughly, but it's working for me so far.

[jameschetwood]

@storrdev You can just put a div between Hammer and the React component, see here: https://github.com/mosch/react-avatar-editor/issues/132