How to make JQuery React?

Faced a problem - the navigation does not work in the application, namely the adaptive version(which is for opening/closing is using JQuery.) How to force React to update the DOM when clicking on a menu?
Make the source in advance.
Component navigation:
import React {Component} from 'react';

import $ from "jquery";
function Nav(props){
return(
<nav>
 <a href="#" classname="menu-trigger">Open menu</a>
 <div classname="container">
 <div classname="logo clearfix">
 <img src="img/logo.png" alt>
</div>
 <div classname="nav__items">
the <ul>
 the <li><a href="#">Home</a></li>
 the <li><a href="#">About us</a></li>
 the <li><a href="#">Shop</a></li>
 the <li><a href="#">Contact us</a></li>
</ul>
</div>
</div>
</nav>
);
}

export default Nav;


JQuery code:
$(document).ready(function() {
 $('.menu-trigger').click(function() {
 $('nav ul').slideToggle(500);
 });//end slide toggle

 $(window).resize(function() { 
 if ( $(window).width() > 500 ) { 
 $('nav ul').removeAttr('style');
}
 });//end resize
});//end ready
June 10th 19 at 16:51
1 answer
June 10th 19 at 16:53
Solution
"this.refs.ClickItem.slideToggle is not a function" says, in response, the designer has tried to bind, writes "Cannot read property 'bind' of undefined."
I slightly altered the code, since he never played.

import React {Component} from 'react';

import $ from "jquery";
class Nav extends Component{
constructor(props){
super();
 this.refs.ClickItem = this.refs.ClickItem.bind(this);
}
menuClick(){
this.refs.ClickItem.slideToggle(500);
}
updateDimensions(){
 if ($(window).width()> 500){
this.refs.ClickItem.removeAttr('style');
}
}
componentDidMount(){
 window.addEventListener("resize", this.updateDimensions)
}
 componentWillUnmount() {
 window.removeEventListener("resize", this.updateDimensions);
}
render(){
return(
<nav>
 <a href="#" classname="menu-trigger" onclick="{()=">this.menuClick()}>Open menu</a>
 <div classname="container">
 <div classname="logo clearfix">
 <img src="img/logo.png" alt>
</div>
 <div classname="nav__items">
 <ul ref="ClickItem">
 the <li><a href="#">Home</a></li>
 the <li><a href="#">About us</a></li>
 the <li><a href="#">Shop</a></li>
 the <li><a href="#">Contact us</a></li>
</ul>
</div>
</div>
</nav>
);
}
}

export default Nav;
- vito_Gerhold24 commented on June 10th 19 at 16:56
, $(this.refs.ClickItem).slideToggle() - Raquel.Labad commented on June 10th 19 at 16:59
thank you! Only I have not worked with slideToggle and I changed to slideDown and everything works - vito_Gerhold24 commented on June 10th 19 at 17:02

Find more questions by tags JavaScriptjQueryReact