I've created a component that outputs a navigation menu.
I'm calling this component from within another component that outputs a website header.
export default function HeaderNav() {
return(
<nav className={styles.headerNav}>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/tests/test001">Test 1</Link>
</li>
<li>
<Link to="/tests/test002">Test 2</Link>
</li>
<li>
<Link to="/tests/test003">Test 3</Link>
</li>
</ul>
</nav>
)
}
I've found that React is wrapping my navigation component in a parent div:
https://imgur.com/a/7gXEJ1F
The addition of this wrapping div creates problems for styling. Especially when it comes to layout for the header.
Ideally I'd like to additional wrapper to not exist. But if there's no way to prevent it from existing, then giving it a classname might help to reduce the issues for styling it.
How can I do either of these things?
Enclose your navigation component between <React.Fragment></React.Fragment> or with shorthand <></>. To further read about React.Fragment
Related
This question already has answers here:
Next.js: Error: React.Children.only expected to receive a single React element child
(8 answers)
Closed 10 months ago.
I get this Error creating blog in NextJS. Error: Multiple children were passed to with href of / but only one child is supported
What am i doing wrong here ?
===============================
Server Error
Error: Multiple children were passed to with href of / but only one child is supported https://nextjs.org/docs/messages/link-multiple-children
This error happened while generating the page. Any console logs will be displayed in the terminal window.
<nav className={styles.main-nav}>
<ul>
<Link href='/'> <li>Home</li></Link>
<Link href='/about'> <li>About</li></Link>
<Link href='/blog'> <li>Blog</li></Link>
<Link href='/contact'> <li>Contact</li></Link>
</ul>
</nav>
Inside 'Link' component must be 'a' tag
<ul>
<li> <Link href='/'> <a>Home</a> </Link> </li>
<li> <Link href='/about'> <a>About</a> </Link> </li>
<li> <Link href='/blog'> <a>Blog</a> </Link> </li>
<li> <Link href='/contact'> <a>Contact</a> </Link> </li>
</ul>
As in title - how does activeClassName param work with react-router-dom Link component? What does it mean that some class is active? In docs we can find only:
The className a <Link> receives when its route is active. No active class by default.
But without explanation what the active route actually is.
Edit: okay, now, having understood this, I can see that I could guess this meaning of this phrase. But I still think that was quite confusing.
If the URL is same as the to of your Link, activeClassName will be assigned to your anchor tag. Suppose you have 3 tabs:
<Link to='/tab-1' activeClassName="red-text">Tab 1</Link>
<Link to='/tab-2' activeClassName="red-text">Tab 2</Link>
<Link to='/tab-3' activeClassName="red-text">Tab 3</Link>
If your current URL is site.com/tab-2, only tab 2 will have the red-text class name, other tabs will not have it.
The above code will render as below when the url is site.com/tab-2, so that Tab 2 will be highlighted.
<a href='/tab-1'>Tab 1</Link>
<a href='/tab-2' class="red-text">Tab 2</Link>
<a href='/tab-3' >Tab 3</Link>
Example here.
I'm using React version 16.6.3. I need some help to implement active menu item in sidebar. I need to do this thing: when the user clicks on any <li> in sidebar, the <li> must become active (for example, it gets class "active").
If the <li> is active and have treeview class, then, inside it, set to <ul> class "show" (if any)
Here's the code:
import React , { Component } from "react"
export default class Sidebar extends Component {
constructor(props) {
super(props);
this.state = { 'activeItem': 0 }
}
render() {
return (
<div className="main-sidebar">
<section className="sidebar">
<ul className="sidebar-menu tree">
<li className="nav-divider"></li>
<li className="header">PERSONAL</li>
<li>
<a href="#">
<span>Dashboard</span>
</a>
</li>
<li className="treeview">
<a href="#">
<span>Application</span>
</a>
<ul class="treeview-menu">
<li>Chat app</li>
<li>Project</li>
<li>Contact / Employee</li>
</ul>
</li>
<li className="treeview">
<a href="#">
<span>Application</span>
</a>
</li>
</ul>
</section>
</div>
)
}
}
The first question you should ask yourself is (if not always) how you store the data of the user selection. You might have multiple activeItem because this is a tree, ex. multiple branches can be open or close at the same time. You need to look for a data structure to hold that thinking first.
Here's a simple one, give each item an id/key, <li key="1-0-0"> and then you can track onChange event of this li and then inside onChange you can use a flat array structure to store the current state of this simple tree. For example, {'1-0-0': true }
There're lots of different ways to do data part, the above one is a simple idea to get you started. And after that, based on the captured data, you can then update the children attribute of each node, ex. <li className={ getNodeAttr('1-0-0')> assuming getNodeAttr is a utility function that give you back the class name string given the node name.
You should not bind active state on a navigation sidebar because if a user type a route directly in a browser the menu item won't be highlighted.
Instead, try to bind the active state to the route with NavLink (if you use react-router):
ref: https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/NavLink.js
I created a simple navigation menu with Bootstrap. It's working fine in pure javascript, but when adapting it into react, the hamburger icon doesn't function (nothing happens on click). I installed bootstrap with
npm install --save bootstrap
And then added the bootstrap css to index.html in the public folder:
link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
My jsx is as follows:
<nav className="navbar navbar-expand-sm navbar-dark bg-dark">
<div className="container">
<button className="navbar-toggler" data-toggle="collapse" data-target="#navbarNav"><span className="navbar-toggler-icon"></span></button>
<div className="collapse navbar-collapse" id="navbarNav">
<ul className="navbar-nav ml-auto">
<li className="nav-item">
<Link to="/app/portfolio" className="nav-link">PORTFOLIO</Link>
</li>
<li className="nav-item">
<Link to="/app/about" className="nav-link">ABOUT</Link>
</li>
<li className="nav-item">
<Link to="#create-head-section" className="nav-link" style={{fontStyle: 'italic'}}>Personal art</Link>
</li>
<li className="nav-item">
<Link to="#share-head-section" className="nav-link">CONTACT</Link>
</li>
</ul>
</div>
</div>
</nav>
Again, everything looks fine except that the hamburger icon is not functioning.
The bootstrap show class is used to display the collapsible menu items. So, the task is to simply add the show class conditionally on click of the hamburger icon.
Just follow these simple steps to achieve this functionality.
Add a showCollapsedMenu(the name is up to you) property with initial value of false in your state like this:
state={
showCollapsedMenu: false
}
Then declare a function like this which when called will reverse the current state:
toggleMenu = () => {
this.setState({
showCollapsedMenu: !this.state.showCollapsedMenu
})
}
The above function will be called whenever the hamburger icon is clicked. So implement the onCLick method on the hamburger icon like this:
<button
className="navbar-toggler"
type="button"
onClick={this.toggleMenu} // <=
data-toggle="collapse"
data-target="#navbarNav">
<span className="navbar-toggler-icon"></span>
</button>
Now create a const show which will conditionally add the show class depending on the state of showCollapsedMenu:
const show = (this.state.showCollapsedMenu) ? "show" : "" ;
Now finally add this show to the div with collapse navbar class like this:
<div className={"collapse navbar-collapse " + show} id="navbarNav">
Note: Mixing jQuery with React is not recommended as they both manipulate the DOM differently. While it may seem an easy solution, it might result in bigger problems.
Bootstrap events require jQuery, Popper and Bootstrap.js source. That page will also let you know which components require JS. You can include jQuery, Popper and bootstrap.js in the index.html file, where you load your bundle. Either add that, or simply check out Reactstrap, which implements Bootstrap components in React.
According to https://www.npmjs.com/package/bootstrap#whats-included, the npm version of Bootstrap doesn't include jQuery, but the navbar component needs it, so you might need to add https://www.npmjs.com/package/jquery to your dependencies.
<ul>
<li>
<Link to={'/home'}>
Home
</Link>
</li>
<li>
<Link to={'/story'}>
About us
</Link>
</li>
</ul>
I have above navigation tab in reactjs and I would like to toggle active class on click between links. I have been go through on various stacks but not able to find proper answer for above scenerio.
One can use react-router/web#NavLink instead react-router/web#Link.
Attach the class that you want to use as a active class using activeClassName property of NavLink.
<ul>
<li>
<NavLinkto={'/home'} activeClassName="selected">Home</NavLink>
</li>
<li>
<NavLinkto={'/story'} activeClassName="selectedSec">About us</NavLink>
</li>
</ul>