I am working on a project using react.js, I have a component called chatBox which I am using in different components, as shown in the example.
The problem that arises is that every time I render a component the click event is duplicating. Is there a way to do a removeEventListener when the component is removed?
var ChatBox = React.createClass({
componentDidMount(){
$('.addPrivate').on('click', function(){
})
},
componentWillunMount(){
console.log('removeEventListener')
},
render(){
return <div>Chat <a href="javascript:;" className="addPrivate">Click</a></div>
}
})
var Home = React.createClass({
render(){
return <div>
<chatBox />
</div>
}
})
var Profile = React.createClass({
render(){
return <div>
<chatBox />
</div>
}
})