Seeking assistance from anyone! I've been grappling with a problem and can't seem to figure out a solution. Here's the scenario:
My current setup involves a sidebar and a top bar for navigation in React. Check out my app so far in this image link. What I'm aiming to achieve is rendering components in a specific DOM when clicked from the sidebar. Below is the code snippet of my Sidebar component:
export default function Sidebar() {
return (
<div className="wrapper">
<nav id="sidebar">
<div className="sidebar-header text-center">
<h3>Point of Sales</h3>
<strong>POS</strong>
</div>
<ul className="list-unstyled components">
<li>
<Link to="/inventory">
<i className="fas fa-briefcase"></i>
<span className="navText ml-3">Inventory</span>
</Link>
</li>
<li>
<a href="#">
<i className="fas fa-image"></i>
<span className="navText">Portfolio</span>
</a>
</li>
<li>
<a href="#">
<i className="fas fa-question"></i>
<span className="navText">FAQ</span>
</a>
</li>
<li>
<a href="#">
<i className="fas fa-paper-plane"></i>
<span className="navText">Contact</span>
</a>
</li>
</ul>
</nav>
<div id="content">
<Topbar />
{/* Render navigation components here!*/}
</div>
<Route path="/inventory" exact={true} component={InventoryView} />
</div>
);
}
However, upon clicking a link in the sidebar, the rendered component appears as shown in this image. I have attempted various methods such as passing props, using React composition, and creating custom components but to no avail.
Any insights or suggestions? Your help is greatly appreciated!