React responsive Navbar

Question

I have a standard Navbar with about 8 options next to eachother. When I resize my window I want to show as many options as possible, without a horizontal scrollbar. The other options will be put in a "Show more" dropdown.

Is it okay to have a resize listener and move DOM-elements around with vanilla-javascript, in my React Component? Or is there a better React way to do this?

UPDATE: here is a simple jquery codepen witch shows the principle: http://codepen.io/sstraatemans/pen/MJNGaL

This is my render method of my component:

render () {
  let navItems = [
    {title: "home", link: "/"},
    {title: "news", link: "/news"},
    {title: "organisation", link: "/organisation"},
    {title: "people", link: "/people"}
  ];

  return (
    <Nav>
      {navItems.map((item) => {
        return (
          <NavItem title={item.title} link={item.link} />
        );
      })}
    </Nav>
  );
}

Thanks for the help.

Answer 1

Just think as react.

you might need toggleNav & updateDocWidth function to change state:

this.state = {
  doc_width: document.body.clientWidth,
  show_nav: false
}

and add window.onresize = this.updateDocWidth before the return in render(), and all of rest is about rendering.