I have this following component -
import React from 'react';
import {Route, Link} from 'react-router-dom'
import Error from './Error'
class NavigationBar extends React.Component {
render() {
return (
<div className="nav">
<nav className="navbar navbar-inverse bg-inverse">
<ul className="nav navbar-nav">
<li className="nav-item">
<Link to={"/data"} className="nav-link"> Data </Link>
</li>
<li className="nav-item">
<Link to={"/analysis"} className="nav-link"> Analysis </Link>
</li>
<li className="nav-item">
<Link to={"/Monitor"} className="nav-link"> Monitor </Link>
</li>
</ul>
</nav>
<Route path={"/webiks/:user"} component={Error}/>
</div>
);
}
}
export default NavigationBar;
In addition i added a nav.css file to index.html in order to make some changes to the boostrap styling.
The problem is that when entering the "webkis/:user" url the style only boostrap styling without the changes of the nav.css file.
If one can explaing the reason , and also to mention some of the common methods
for styling components (which is NOT an inline styling).
Thanks.
Place nav.css in the same folder as NavigationBar.js, then add this line on your import list: import './nav.css'
Related
There are many similar problems, but I can't solve this background error warning. Strictly speaking, I'm still a novice. I know to change li, but I don't know where to start. Please help me. This error warning:
next-dev.js?3515:20 Warning: validateDOMNesting(...): <li> cannot appear as a descendant of <li>.
at li
at li
at ul
at div
at div
at Top (webpack-internal:///./components/header/Top.js:28:84)
at header
at Header (webpack-internal:///./components/header/index.js:18:11)
at div
at Home
at PersistGate (webpack-internal:///./node_modules/redux-persist/es/integration/react.js:39:5)
at Provider (webpack-internal:///./node_modules/react-redux/es/components/Provider.js:13:3)
at MyApp (webpack-internal:///./pages/_app.js:22:11)
at PathnameContextProviderAdapter (webpack-internal:///./node_modules/next/dist/shared/lib/router/adapters.js:62:11)
at ErrorBoundary (webpack-internal:///./node_modules/next/dist/compiled/#next/react-dev-overlay/dist/client.js:301:63)
at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/compiled/#next/react-dev-overlay/dist/client.js:850:919)
at Container (webpack-internal:///./node_modules/next/dist/client/index.js:62:1)
at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:172:11)
at Root (webpack-internal:///./node_modules/next/dist/client/index.js:347:11)
I hope something can help me correct him. Like obsessive-compulsive disorder, I can't face the red color of the back. This is my original code:
import styles from "./styles.module.scss";
import { MdSecurity } from "react-icons/md";
import { BsSuitHeart } from "react-icons/bs";
import { RiAccountPinCircleLine, RiArrowDropDownFill } from "react-icons/ri";
import Link from "next/link";
import { useState } from "react";
import UserMenu from "./UserMenu";
export default function Top() {
const [ loggedIn, setLoggedIn ] = useState(true);
const [visible, setVisible] = useState(false);
return (
<div className={styles.top}>
<div className={styles.top_container}>
<div></div>
<ul className={styles.top_list}>
<li className={styles.li}>
<MdSecurity />
<span>Buyer Prodtection</span>
</li>
<li className={styles.li}>
<span>Customer Service</span>
</li>
<li className={styles.li}>
<span>Help</span>
</li>
<li className={styles.li}>
<BsSuitHeart />
<Link href={"/profile/whishlist"}>
<span>Whishlist</span>
</Link>
</li>
<li
className={styles.li}
onMouseOver={() => setVisible(true)}
onMouseLeave={() => setVisible(false)}
>
{loggedIn ? (
<li className={styles.li}>
<div className={styles.flex}>
<img
src={"/"}
width={22}
height={22}
alt=''
/>
<RiArrowDropDownFill />
</div>
</li>
) : (
<li className={styles.li}>
<div className={styles.flex}>
<RiAccountPinCircleLine />
<span>Account</span>
<RiArrowDropDownFill />
</div>
</li>
)}
{visible && <UserMenu loggedIn={loggedIn} />}
</li>
</ul>
</div>
</div>
);
}
You cannot nest li tags in html.
For example
<ul>
<li>
<li></li>
</li>
</ul>
If you would like a nested list, you can do this
<ul>
<li>
<ul>
<li></li>
</ul>
</li>
</ul>
I'm using #tanstack/react-location in React Typescript project + 'react-redux'.
When I change redux auth state (login, logout) I also make my MainNavigation changing. Some Links are added or removed. And when it happens the router stops working.
Updated Links are working, url is changing, but Router isn't responding.
After refresh Router works again.
App.tsx
...
<Router
location={reactLocation}
routes={appRoutes}
defaultPendingElement={<Spinner />}
defaultPendingMs={10}
>
<MainNavigation />
<Outlet />
</Router>
MainNavigation.tsx
<header className="header">
<Link to="/" getActiveProps={getActiveProps}>
<div className="logo">RS Lang</div>
</Link>
<nav>
<ul>
<li>
<Link to="/" getActiveProps={getActiveProps}>
Home
</Link>
</li>
<li>
<Link to="/team" getActiveProps={getActiveProps}>
Team{' '}
</Link>
</li>
<li>
<Link to="/textbook" getActiveProps={getActiveProps}>
Textbook
</Link>
</li>
{isLoggedIn && (
<li>
<Link to="/dictionary" getActiveProps={getActiveProps}>
Dictionary
</Link>
</li>
)}
<li>
<Link to="/games" getActiveProps={getActiveProps}>
Games
</Link>
</li>
{!isLoggedIn && (
<li>
<Link to="/auth" getActiveProps={getActiveProps}>
Login|SignUp
</Link>
</li>
)}
{isLoggedIn && (
<li>
<Link to="/profile" getActiveProps={getActiveProps}>
Profile {authState.user.name}
</Link>
</li>
)}
{isLoggedIn && (
<li>
<button type="button" onClick={logoutHandler}>
Logout
</button>
</li>
)}
</ul>
</nav>
</header>
for me the issue was that the definition of the ReactLocation was not in the main.tsx. So I fixed it like so:
main.tsx
export const reactLocation = new ReactLocation();
ReactDOM.createRoot(document.getElementById('root')!).render(<App />);
App.tsx
import { reactLocation} from './main.tsx';
export const App = () => {
return <Router
location={reactLocation}
routes={appRoutes}
defaultPendingElement={<Spinner />}
defaultPendingMs={10}
>
<MainNavigation />
<Outlet />
</Router>
}
Hope that helps :)
(I was using vite as build tool)
I have install bootstrap and import import 'bootstrap/dist/css/bootstrap.css' in my _app.js
But after creating the tabs it does not work can someone help please?
Here is the tab code
import Link from 'next/link'
const NavigationTabs = () => {
return (
<>
<nav>
<div
className='nav nav-tabs mb-3 justify-content-center'
id='tabContentList'
role='tablist'
>
<Link href='#login' className='nav-item'>
<a
className='nav-link active'
id='nav-login-tab'
role='tab'
data-bs-toggle='tab'
data-bs-target='#login'
aria-controls='login'
aria-selected='true'
>
Login
</a>
</Link>
<Link href='#register' className='nav-item'>
<a
className='nav-link active'
id='nav-register-tab'
data-bs-toggle='tab'
data-bs-target='#register'
role='tab'
aria-controls='register'
aria-selected='false'
>
Register
</a>
</Link>
</div>
</nav>
<div className='tab-content' id='nav-tabContent'>
<div
className='tab-pane fade show active'
id='login'
role='tabpanel'
aria-labelledby='nav-login-tab'
>
Tab 1 content
</div>
<div
className='tab-pane fade'
id='register'
role='tabpanel'
aria-labelledby='nav-register-tab'
>
Tab 2 content
</div>
</div>
</>
)
}
export default NavigationTabs
Is there a better way to create it in bootstrap 5 or should I add the script tag from bootstrap?
I have a React app, I'm trying to add a NavBar there like this
<ul id="dropdown1" className="dropdown-content">
<li><NavLink to="/create">Create lessons</NavLink></li>*/}
<li><NavLink to="/lessons">Lessons</NavLink></li>
<li><NavLink to="/quizes">Quizes</NavLink></li>
<li><NavLink to="/quizcreator">Create QuizGame</NavLink></li>
<li></li>
<li></li>
</ul>
<nav>
<div className="nav-wrapper">
Logo
<ul className="right hide-on-med-and-down">
<li><NavLink to="/home">Home</NavLink></li>
<li><a className="dropdown-trigger" href="#!" data-target="dropdown1">Dropdown<i
className="material-icons right">arrow_drop_down</i></a></li>
<li><a href="/" onClick={logoutHandler}>Logout</a></li>
</ul>
</div>
</nav>
I would like this thing to open and show the contents either when clicked or hovered over
The materialize css website describes the following code
$(".dropdown-trigger").dropdown();
But I can't figure out where to insert it? Application on the MERN stack
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!-- Dropdown Structure -->
<ul id="dropdown1" class="dropdown-content">
<li>one</li>
<li>two</li>
<li class="divider"></li>
<li>three</li>
</ul>
<nav>
<div class="nav-wrapper">
Logo
<ul class="right hide-on-med-and-down">
<li>Sass</li>
<li>Components</li>
<!-- Dropdown Trigger -->
<li><a class="dropdown-trigger" href="#!" data-target="dropdown1">Dropdown<i class="material-icons right">arrow_drop_down</i></a></li>
</ul>
</div>
</nav>
According to the official doc you should be able to enable all your dropdowns like the following:
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.dropdown-trigger');
var instances = M.Dropdown.init(elems);
});
Here is an example (please open in full-page):
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.dropdown-trigger');
var instances = M.Dropdown.init(elems);
});
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!-- Dropdown Structure -->
<ul id="dropdown1" class="dropdown-content">
<li>one</li>
<li>two</li>
<li class="divider"></li>
<li>three</li>
</ul>
<nav>
<div class="nav-wrapper">
Logo
<ul class="right hide-on-med-and-down">
<li>Sass</li>
<li>Components</li>
<!-- Dropdown Trigger -->
<li><a class="dropdown-trigger" href="#!" data-target="dropdown1">Dropdown<i class="material-icons right">arrow_drop_down</i></a></li>
</ul>
</div>
</nav>
add a onclick event in your second "li" item, pass the event object, call dropdown() function by fetching the classname from the event object.
<li>
<a className="dropdown-trigger" href="#!" onclick{(e) => e.target.className.dropdown();} data-target="dropdown1">
Dropdown<i className="material-icons right">arrow_drop_down</i>
</a>
</li>
Easy ! just add this code to the js file
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.dropdown-trigger');
var instances = M.Dropdown.init(elems);
});
You haven't init the dropdown that's why it's not working ! And don't use this framework maybe MDbootstrap will be perfect because they give you a React version and they have a pretty documentation without ads !
As You said, you are using React, and based on the link that you left on the question, $(".dropdown-trigger").dropdown(); is the jQuery way, you need to find out the React way
You could install materialize-css package, I guess you will find How to use materialize-css with React? helpful for this purpose
then import and use the package like this:
import React, { useRef, useEffect } from 'react';
import M from 'materialize-css';
function DropDown() {
const dropDownTriggerRef = useRef();
useEffect(() => {
M.Dropdown.init(dropDownTriggerRef.current);
}, [])
return (
// all of the other tags and other stuff
....
<li>
<a className="dropdown-trigger"
href="#!" data-target="dropdown1"
ref={dropDownTriggerRef}
>
Dropdown
<i className="material-icons right"> arrow_drop_down </i>
</a>
</li>
....
);
}
I am trying to create a very simple nextjs demo project using bootstrap for styling.
I am able to use the basic styling very easily by first installing bootstrap using npm and then including it in my app.js
import 'bootstrap/dist/css/bootstrap.min.css'
I created a navbar and it worked fine but when I tried to make it collapse when my screen size shrinks does not seem to work.
I tried to find my way through it and came to know that it requires popperjs and jquery in particular order, here, and I did the same. I included the 2 in my app.js file. My import is the below.
import 'jquery/dist/jquery.min.js'
import '#popperjs/core/dist/umd/popper.min.js'
import 'bootstrap/dist/css/bootstrap.min.css'
But still my toggle button does not pop the navbar items when clicked. I can see not errors on my browser console and the dev console from where I run my project.
Here is a section of dependencies from my package.json
"dependencies": {
"#popperjs/core": "^2.4.2",
"bootstrap": "^4.5.0",
"jquery": "^3.5.1",
"next": "9.4.4",
"react": "16.13.1",
"react-bootstrap": "^1.0.1",
"react-dom": "16.13.1"
}
I can see similar questions on SO but all of them are for older bootstrap version with different class names for bootstrap components.
Here is my component
/**
* className to create the navbar using bootstrap, TODO, intial version
*/
export default class NavBar extends Component {
render() {
return (
<div id="rootdiv">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarTogglerDemo01"
aria-controls="navbarTogglerDemo01"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<a class="navbar-brand" href="#">
Hidden brand
</a>
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">
Home <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Link
</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">
Disabled
</a>
</li>
</ul>
</div>
</nav>
</div>
);
}
}```
I don't know why it did not work with native bootstrap but I was able to get it to work after switching to react-bootstrap. I hope this will help some one in future.
Also there is no need to manually import popper and jquery in the app.js file.
I only imported the bootstrap min file.
import 'bootstrap/dist/css/bootstrap.min.css'
import Navbar from "react-bootstrap/Navbar";
import Nav from "react-bootstrap/Nav";
import React from "react";
const RBNavBar = () => {
return (
<Navbar bg="light" expand="lg" id="myNavbar">
<Navbar.Brand href="#home"><img src="/logo_lpb_small.png"></img></Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="ml-auto" id="myNavItem">
<Nav.Link href="/" id="myNavItem">Home</Nav.Link>
<Nav.Link href="contact" id= "myNavItem">Contact</Nav.Link>
<Nav.Link href="about" id= "myNavItem">About Us</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
);
};
export default RBNavBar;