How to create a dynamic element inside a Navbar in react typescript

Question

Ok so my problem is the following I have in my app.js a Navbar that is inside a .

App.js

 return (
    <div className="App">
      <Router>
        <Navbar color="light" light expand="md">
          <NavbarBrand href="/"></NavbarBrand>
          <NavbarToggler onClick={toggle} />
          <Collapse isOpen={isOpen} navbar>
            <Nav className="mr-auto" navbar>
              {user && <NavItemComponent />}
              <UncontrolledDropdown nav inNavbar>
                <DropdownToggle nav caret style={{ color: '#007bff' }}>
                  Inventory
                </DropdownToggle>
                <DropdownMenu>
                  <DropdownItem>
                    {user && (
                      <NavItem>
                        <NavLink>
                          <Link to="/inventory-orders" exact activeStyle={{ color: 'purple' }}>
                            Inventory Orders
                          </Link>
                        </NavLink>
                      </NavItem>
                    )}
                  </DropdownItem>
                  <DropdownItem>
                    {user && (
                      <NavItem>
                        <NavLink>
                          <Link
                            to="/inventory-transactions"
                            exact
                            activeStyle={{ color: 'purple' }}
                          >
                            Inventory Transactions
                          </Link>
                        </NavLink>
                      </NavItem>
                    )}
                  </DropdownItem>
                  <DropdownItem>
                    {user && (
                      <NavItem>
                        <NavLink>
                          <Link to="/inventory-leases" exact activeStyle={{ color: 'purple' }}>
                            Inventory Leases
                          </Link>
                        </NavLink>
                      </NavItem>
                    )}
                  </DropdownItem>
                  <DropdownItem>
                    {user && (
                      <NavItem>
                        <NavLink>
                          <Link to="/inventory-items" exact activeStyle={{ color: 'purple' }}>
                            Inventory Items
                          </Link>
                        </NavLink>
                      </NavItem>
                    )}
                  </DropdownItem>
                  <DropdownItem>
                    {user && (
                      <NavItem>
                        <NavLink>
                          <Link to="/add-inventory" exact activeStyle={{ color: 'purple' }}>
                            Add Inventory
                          </Link>
                        </NavLink>
                      </NavItem>
                    )}
                  </DropdownItem>
                </DropdownMenu>
              </UncontrolledDropdown>

              {user && (
                <NavItem>
                  <NavLink>
                    <Link to="/customer-billings" exact activeStyle={{ color: 'purple' }}>
                      Customer Billings
                    </Link>
                  </NavLink>
                </NavItem>
              )}
              {user && (
                <NavItem>
                  <NavLink>
                    <Link to="/payouts" exact activeStyle={{ color: 'purple' }}>
                      Payouts
                    </Link>
                  </NavLink>
                </NavItem>
              )}
              {user && (
                <NavItem>
                  <NavLink>
                    <Link to="/global-configuration" exact activeStyle={{ color: 'purple' }}>
                      Global Configuration
                    </Link>
                  </NavLink>
                </NavItem>
              )}
              {user && (
                <NavItem>
                  <NavLink>
                    <Link to="/boom-cards" exact activeStyle={{ color: 'purple' }}>
                      Boom Cards
                    </Link>
                  </NavLink>
                </NavItem>
              )}

              {user && (
                <NavItem>
                  <NavLink>
                    <Link to="/accounts" exact activeStyle={{ color: 'purple' }}>
                      Create an Account
                    </Link>
                  </NavLink>
                </NavItem>
              )}

              <NavItem>
                {user && (
                  <NavLink>
                    <Link to="/" exact activeStyle={{ color: 'purple' }} onClick={_onUserSignedOut}>
                      Log Out
                    </Link>
                  </NavLink>
                )}
              </NavItem>
            </Nav>
          </Collapse>
        </Navbar>
        <Route
          path="/"
          render={() =>
            !user ? <LoginPage onUserSignedIn={_onUserSignedIn} /> : <Redirect to="/transactions" />
          }
        />
        <Route path="/accounts" component={Accounts} />
        <Route path="/transactions" render={() => <Transactions user={user} />} />
        <Route path="/payouts" render={() => <Payouts user={user} />} />
        <Route path="/global-configuration" render={() => <GlobalConfig user={user} />} />
        <Route path="/customer-billings" render={() => <CustomerBillings user={user} />} />
        <Route path="/boom-cards" render={() => <BoomCards user={user} />} />
        <Route
          path="/inventory-transactions"
          render={() => <InventoryTransactions user={user} />}
        />
        <Route path="/inventory-leases" render={() => <InventoryLeases user={user} />} />
        <Route path="/inventory-items" render={() => <InventoryItems user={user} />} />
        <Route path="/inventory-orders" render={() => <InventoryOrders user={user} />} />
        <Route path="/add-inventory" render={() => <InventoryAdd user={user} />} />
        <Route
          path="/create-inventory-transaction"
          render={() => <CreateInventoryTransaction user={user} />}
        />
      </Router>
    </div>
  );
}

within I have the link to the page that I want to go to. how do I create a single component that allows me to pass the values inside without creating one component for each and every . I already create a component called NavItemComponent and it works but I don't know how to pass all the values that I need inside just that one component I hope I explained myself clear.

Component.jsx

import React, { useState } from 'react';
import { BrowserRouter as Router, Route, Redirect, Link } from 'react-router-dom';
import {
  Collapse,
  Navbar,
  NavbarToggler,
  NavbarBrand,
  Nav,
  NavItem,
  NavLink,
  UncontrolledDropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem,
  NavbarText,
} from 'reactstrap';

const NavItemComponent = props => {
  const [isOpen, setIsOpen] = useState(false);

  const toggle = () => setIsOpen(!isOpen);

  return (
    <div>
      <NavItem>
        <NavLink>
          <Link to="/transactions" exact activeStyle={{ color: 'purple' }}>
            Transactions
          </Link>
        </NavLink>
      </NavItem>
    </div>
  );
};

export default NavItemComponent;

Answer 1

I'm not sure I get what you want, but if I'm right, you want to have a way to specify all the <NavItem>...</NavItem> without re-writing one for every link you add.

If this is right then you can create an array of link like const links = [{'URL', 'URLLabel'},{}] and then do smth like

links.map(link => <NavItem>...</NavItem>)

This way you'll only write it once