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?
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 am starting to use React/Next.js and I have got the error:
TypeError: Cannot read properties of undefined (reading 'Item')
When trying to execute the following code in a Next.js application.
The error is due to the header code that is in components->Menu.js file.
I added the menu code after creating the application with npx create-next-app and installing reactstrap
import MyApp from 'next';
import { Nav, Navbar, NavDropdown } from 'reactstrap'
const Menu = () => {
return (
<div>
<Navbar bg="" expand="lg">
<Navbar.Brand href="/">
<h1>Logo</h1>
</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link title="Página Inicial" href="/">Home</Nav.Link>
<Nav.Link title="Quem Somos" href="/about">About Us</Nav.Link>
<Nav.Link title="Fale conosco" href="/contact">Contact</Nav.Link>
<NavDropdown title="Social" id="basic-nav-dropdown">
<NavDropdown.Item href="https://protonmail.com/" title="Proton" target="_blank">Proton</NavDropdown.Item>
<NavDropdown.Item href="https://www.deepl.com/translator" title="Deepl" target="_blank">Deepl</NavDropdown.Item>
<NavDropdown.Item href="http://duckduckgo.com/" title="DuckDuckGo" target="_blank">DuckDuckGo</NavDropdown.Item>
</NavDropdown>
</Nav>
</Navbar.Collapse>
</Navbar>
</div>
)
}
export default Menu
If I take the NavDropdown out, I get the following error:
Error: Element type is invalid: expected a string (for built-in
components) or a class/function (for composite components) but got:
undefined. You likely forgot to export your component from the file
it's defined in, or you might have mixed up default and named imports.
(The code without NavDropdown is bellow)
<Navbar bg="" expand="lg">
<Navbar.Brand href="/">
<h1>Logo</h1>
</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link title="Página Inicial" href="/">Home</Nav.Link>
<Nav.Link title="Quem Somos" href="/about">About Us</Nav.Link>
<Nav.Link title="Fale conosco" href="/contact">Contact</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
I am calling the Menu component in the code bellow:
import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
import 'bootstrap/dist/css/bootstrap.min.css';
import { Button } from 'reactstrap';
import { Nav, Navbar, NavDropdown } from 'reactstrap'
import Menu from '../components/Menu'
export default function Home() {
return (
<div className={styles.container}>
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<Menu></Menu>
<div className={styles.first}></div>
<main className={styles.main}>
<h1 className={styles.title}>
Welcome to Next.js!
</h1>
<p className={styles.description}>
Get started by editing{' '}
<code className={styles.code}>pages/index.js</code>
</p>
<div className={styles.grid}>
<a href="https://nextjs.org/docs" className={styles.card}>
<h2>Documentation →</h2>
<p>Find in-depth information about Next.js features and API.</p>
</a>
<a href="https://nextjs.org/learn" className={styles.card}>
<h2>Learn →</h2>
<p>Learn about Next.js in an interactive course with quizzes!</p>
</a>
<a
href="https://github.com/vercel/next.js/tree/canary/examples"
className={styles.card}
>
<h2>Examples →</h2>
<p>Discover and deploy boilerplate example Next.js projects.</p>
</a>
<a
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
className={styles.card}
>
<h2>Deploy →</h2>
<p>
Instantly deploy your Next.js site to a public URL with Vercel.
</p>
</a>
</div>
</main>
<footer className={styles.footer}>
<a
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
Powered by{' '}
<span className={styles.logo}>
<Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
</span>
</a>
</footer>
</div>
)
}
I got the Menu code from this code: https://github.com/webdeveloperbrasil/next-aula-002
**If I remove the Menu from the code, it works fine.
I am working on a menu drop down in next.js project,
I made a method to hide and show the data of the sub menu,but I am not able to show the specific sub dropdown. Here is the code
import {useEffect, useState } from "react";
function Header({data}){
const [showMe, setShowMe] = useState(false);
function toggle(param){
console.log(param)
setShowMe(!showMe);
};
return(
<div className="mobile-header">
<div className="mobile-menu">
<div className="menu-icon">
<div className="wrapper">
<input type="checkbox" id="navigation" />
<label for="navigation">
+
</label>
<nav>
<ul>
<li className="menu-heading">
<span>Menu</span>
<span>
<label for="navigation">X</label>
</span>
</li>
{data.menus.map((post, index) => {
return (
<li className="menu-list" id={index}>
{post.title} <span onClick = {(event)=>toggle({index})} index={index} >+</span>
<ul style={{display: showMe?"block":"none"}} index={index} value={index} className="category-one">
{post.menu_columns.map((subItems, sIndex) => {
return <li index={sIndex}>
{subItems.title}
<span>+</span>
<ul className="category-two">
{subItems.menu_items.map((x) => {
return <li>
{x.title}
</li>
})}
</ul>
</li>;
})}
</ul>
</li>)})}
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
)
}
export default Header;
toggle is the function, which responsible to show and hide the data, there is a parameter passed in this function which provide the specific index value, how do we target the specific div by using the index value in this.
I have added bulma.css in my Next.js project and all runs well, but navbar toggle doesn't work because need add some pure javascript code and React doesn't provide pure DOM events
Just add React Lifecycle event and put your code.
ORIGINAL example:
import React from "react";
class NavBar extends React.Component {
componentDidMount() {
const $navbarBurgers = Array.prototype.slice.call(
document.querySelectorAll(".navbar-burger"),
0
);
if ($navbarBurgers.length > 0) {
// Add a click event on each of them
$navbarBurgers.forEach(el => {
el.addEventListener("click", () => {
// Get the target from the "data-target" attribute
const target = el.dataset.target;
const $target = document.getElementById(target);
// Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
el.classList.toggle("is-active");
$target.classList.toggle("is-active");
});
});
}
}
render() {
return (
<nav className="navbar" role="navigation" aria-label="main navigation">
<div className="navbar-brand">
<a className="navbar-item" href="https://bulma.io">
<img
src="https://bulma.io/images/bulma-logo.png"
width="112"
height="28"
/>
</a>
<a
role="button"
className="navbar-burger burger"
aria-label="menu"
aria-expanded="false"
data-target="navbarBasicExample"
>
<span aria-hidden="true" />
<span aria-hidden="true" />
<span aria-hidden="true" />
</a>
</div>
<div id="navbarBasicExample" className="navbar-menu">
<div className="navbar-start">
<a className="navbar-item">Home</a>
<a className="navbar-item">Documentation</a>
<div className="navbar-item has-dropdown is-hoverable">
<a className="navbar-link">More</a>
<div className="navbar-dropdown">
<a className="navbar-item">About</a>
<a className="navbar-item">Jobs</a>
<a className="navbar-item">Contact</a>
<hr className="navbar-divider" />
<a className="navbar-item">Report an issue</a>
</div>
</div>
</div>
<div className="navbar-end">
<div className="navbar-item">
<div className="buttons">
<a className="button is-primary">
<strong>Sign up</strong>
</a>
<a className="button is-light">Log in</a>
</div>
</div>
</div>
</div>
</nav>
);
}
}
export default NavBar;
I had the same issue and in my case I can resolve it adding in the _app component this line
import 'bulma/css/bulma.css
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'