Jquery and react components how implement some of hide effect


#1

I do not understand well how to refer to the containers tags to manipulate the dom, or have to go inside some kind of special function. Most examples I find on the internet are made on templates in html files, this is my react component but the function has not worked for me, as you recommend to do this type of effect already add the jquery library

The previous example if it works but only with templates inside html files

import React from 'react';
import {Link} from 'react-router'
import { Accounts } from 'meteor/accounts-base';
import {Meteor} from 'meteor/meteor';
//import './Landing';
// https://secapaz.com/handwritting/ s รจ c a p a z 
 // <Link to="/registro">crea una cuenta.</Link>
 
export default class NavbarLanding extends React.Component {
 
 // update
 render() {
 return(
 <div className="navbar-landing">
 <nav>
 <div>
 <ul className="ul-landing">
 {/* <img src="./public/images/flat-rocket.jpg"></img> */}
 <li id="navbar"className="navbar-title"><a>Landing </a></li>
 <div className="navbar-menu">
 <li><a>acerca</a></li>
 <li><a>portafolio</a></li>
 <li><a>contacto</a></li>
 <button className="btn"onClick={() => Accounts.logout()}>Logout</button>
 </div>
 </ul>
 </div>
 </nav>
 </div>
 );
 };
}
Meteor.startup(function(){
 $("navbar").click(function(){
 $(this).hide();
 });
});
NavbarLanding.reactProptype = {
 title: React.PropTypes.string.isRequired
};