title: How to fetch dynamically navbar React bootstrap
body: <p>I'm trying to fetch a Nav NavItem dynamically, I've been able to fill in, but not dynamically, what I'd like to do is the following, I have on my site, the home page with the latest news, and the sections of Politics, Tech, Business ... to search specifically for each category, but only that the only thing that changes between them is the id of the category, code that I was able to do:</p>
  
  <pre><code>CustomNavbar.jsx
      render() {
              return (
                  &lt;Navbar default collapseOnSelect&gt;
                      &lt;Navbar.Header&gt;
                          &lt;Navbar.Toggle /&gt;
                          &lt;Navbar.Brand&gt;
                              &lt;Link id="Link" to="/"&gt;
                                  &lt;img src={logo} height="30" alt="logo"/&gt;
                              &lt;/Link&gt;
                          &lt;/Navbar.Brand&gt;
                      &lt;/Navbar.Header&gt;
                      &lt;Navbar.Collapse&gt;
                          &lt;Nav pullRight&gt;
                              &lt;NavItem eventKey={1} componentClass={Link} to="/politics" href="/politics"&gt;
                                  POLITICS
                              &lt;/NavItem&gt;
                              &lt;NavItem eventKey={2} componentClass={Link} to="/business" href="/business" &gt;
                                  BUSINESS
                              &lt;/NavItem&gt;
                              &lt;NavItem eventKey={3} componentClass={Link} to="/tech" href="tech"&gt;
                                  TECH
                              &lt;/NavItem&gt;
                              &lt;NavItem eventKey={4} componentClass={Link} to="/science" href="science"&gt;
                                  SCIENCE
                              &lt;/NavItem&gt;
                              &lt;NavItem eventKey={5} componentClass={Link} to="/sports" href="sports"&gt;
                                  SPORTS
                              &lt;/NavItem&gt;
                              &lt;NavItem eventKey={6} id="Login" componentClass={Link} to="/login" href="login" &gt;
                                  LOGIN
                              &lt;/NavItem&gt;
                          &lt;/Nav&gt;
                      &lt;/Navbar.Collapse&gt;
                  &lt;/Navbar&gt;
              );
  </code></pre>
  
  <p>I want populate my NavbarItems with something like that:</p>
  
  <p>CustomNavbar.jsx</p>
  
  <pre><code>constructor(props) {
          super(props);
          this.state = {
              'items': [],
              isLoading: false,
              error: null,
          };
      }
  
      componentDidMount() {
          this.getItems();
      }
  
      getItems() {
          this.setState({ 'isLoading': true });
  
          fetch('xxx/api/category/')
              .then(results =&gt; {
                  if (results.ok) {
                      return results.json();
                  } else {
                      throw new Error('Something went wrong ...');
                  }
              })
              .then(results =&gt; this.setState({ 'items': results, 'isLoading': false }))
              .catch(error =&gt; this.setState({ error, isLoading: false }));
      }    
  
  
  render() {
          return (
              &lt;Navbar default collapseOnSelect&gt;
                  &lt;Navbar.Header&gt;
                      &lt;Navbar.Toggle /&gt;
                      &lt;Navbar.Brand&gt;
                          &lt;Link id="Link" to="/"&gt;
                              &lt;img src={logo} height="30" alt="logo"/&gt;
                          &lt;/Link&gt;
                      &lt;/Navbar.Brand&gt;
                  &lt;/Navbar.Header&gt;
                  &lt;Navbar.Collapse&gt;
                      &lt;Nav pullRight&gt;
                          {this.state.items.map(function (item, index) {
                              &lt;NavItem eventKey={index} componentClass={Link} 
                               to="/categories/" + {item.name}" href="/categories/" + {item.name}&gt;
                                  {item.name}
                              &lt;/NavItem&gt;
  
                           })}
  
  
                              LOGIN
                          &lt;/NavItem&gt;
                      &lt;/Nav&gt;
                  &lt;/Navbar.Collapse&gt;
              &lt;/Navbar&gt;
          );
  </code></pre>
  
  <p>My routes:</p>
  
  <p>App.js</p>
  
  <pre><code>import React, { Component } from 'react';
  import './App.css';
  import { BrowserRouter as Router, Route } from 'react-router-dom';
  import Home from './components/Home/Home';
  import Politics from './components/Politics/Politics';
  import Business from './components/Business/Business';
  import Tech from './components/Tech/Tech';
  import Science from './components/Science/Science';
  import Sports from './components/Sports/Sports';
  import Login from './components/User/Login/Login';
  import User from './components/User/User/User';
  import Navbar from './components/CustomNavbar/CustomNavbar';
  
  class App extends Component {
    render() {
      return (
        &lt;Router&gt;
          &lt;div&gt;
            &lt;Navbar&gt;&lt;/Navbar&gt;
            &lt;Route exact path="/" component={Home}/&gt;
            &lt;Route path="/politics" component={Politics}/&gt;
            &lt;Route path="/business" component={Business}/&gt;
            &lt;Route path="/tech" component={Tech}/&gt;
            &lt;Route path="/science" component={Science}/&gt;
            &lt;Route path="/sports" component={Sports}/&gt;
            &lt;Route path="/login" component={Login}/&gt;
            &lt;Route path="/user" component={User}/&gt;
          &lt;/div&gt;
        &lt;/Router&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p>I want to populate these categories as Category, without having to keep repeating code to mount the screen, which I thought of doing, would pass the category value through the URL, but I do not know how to do that in React, any help?</p>
  
  <p>Expected result:</p>
  
  <p><a href="https://i.stack.imgur.com/nk18p.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nk18p.png" alt="enter image description here"></a></p>
  
  <p>Folder current structure:</p>
  
  <p><a href="https://i.stack.imgur.com/otAQv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/otAQv.png" alt="enter image description here"></a></p>
  
  <p>Folder result structure: </p>
  
  <p><a href="https://i.stack.imgur.com/P0O5k.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/P0O5k.png" alt="enter image description here"></a></p>
  
  <p>Thank you!</p>