navbar from Bootstrap to reactjs

Question

I have programmed a navbar using Bootstrap and react. In order to obtain the functionality of bootstrap must be installed and bootstrap.js jquery.js. I just want to basically use the CSS file of bootstrap and the functionality of reactjs. Does it make sense to use Bootstrap with reactjs?

I need to realize with reactjs a little help to program the navigation. Here the source of my header. I need help to programm the navbar in reactjs without bootstrap.js and jquery.min.js

import React from "react"
export class Header extends React.Component {
    render() {
        return (
            <nav className="navbar-kwp-header navbar-default navbar-fixed-top">
                <div className="container">
                    <div className="navbar-header">
                        <button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#Navbar">
                            <span className="sr-only">Navigation ein- / ausblenden</span>
                            <span className="icon-bar"></span>
                            <span className="icon-bar"></span>
                            <span className="icon-bar"></span>
                        </button>

                        <a className="navbar-brand" href="#"><img src="images/logo.jpg" alt="" /></a>
                    </div>

                    <div id="Navbar" className="navbar-collapse collapse">
                        <ul className="nav navbar-nav">
                            <li><a href="#">Home</a></li>

                            <li className="dropdown"><a className="dropdown" data-toggle="dropdown" role="button" aria-expanded="false">Service <span className="caret"></span></a>
                                <ul className="dropdown-menu" role="menu">
                                    <li><a href="#">Downloads</a></li>
                                    <li><a href="#">Glossar</a></li>
                                    <li><a href="#">Newsletter</a></li>
                                </ul>
                            </li>

                        </ul>
                    </div>
                </div>
            </nav>
        );
    }
}

Solution

You can manually code a state variable to handle the toggling of the navbar:

class App extends Component {
  state = {
    navCollapsed: true
  }

  _onToggleNav = () => {
    this.setState({ navCollapsed: !this.state.navCollapsed })
  }

  render () {
    const {navCollapsed} = this.state

    return (
      <nav className='navbar navbar-default'>
        <div className='navbar-header'>
          <a className='navbar-brand' href='/'>Your Brand</a>
          <button
            aria-expanded='false'
            className='navbar-toggle collapsed'
            onClick={this._onToggleNav}
            type='button'
            >
            <span className='sr-only'>Toggle navigation</span>
            <span className='icon-bar'></span>
            <span className='icon-bar'></span>
            <span className='icon-bar'></span>
          </button>
        </div>
        <div
          className={(navCollapsed ? 'collapse' : '') + ' navbar-collapse'}
          >
          <ul className='nav navbar-nav navbar-right'>
            <li>
              <a>About</a>
            </li>
          </ul>
        </div>
      </nav>
    )
  }
}

Comments

[Aaron]

I am searching a solution without react-bootstrap.

[sdet.ro]

this solution works, but only partially for me. I get the react as collapsed already