I've two navbar layout and ten pages in my next js project. Now I need to set navbar one for five pages and navbar two for rest of the pages with layout.js at once. How can I do this. If anyone help me about this, I'll be very thankful. Thanks in advance.
NavbarOne.js
const NavbarOne = () => {
return (
<div>
<h1>Navbar One</h1>
</div>
);
}
export default NavbarOne;
NavbarTwo.js
const NavbarTwo = () => {
return (
<div>
<h1>Navbar Two</h1>
</div>
);
}
export default NavbarTwo;
Layout.js
import Footer from "../Footer";
import NavbarOne from "../Navbar/NavbarOne";
const Layout = ({ children }) => {
return (
<div>
<NavbarOne />
{/* <NavbarTwo /> */}
{children}
<Footer />
</div>
);
}
export default Layout;
_app.js
import Layout from '../components/layout/Layout';
import '../styles/styles.scss'
function MyApp({ Component, pageProps }) {
return (
<Layout>
<Component {...pageProps} />
</Layout>
);
}
export default MyApp
Updated
Layout.js
import Footer from "../Footer";
import NavbarOne from "../Navbar/NavbarOne";
import NavbarTwo from "../Navbar/NavbarTwo";
const Layout = ({ children, criteria}) => {
return (
<div>
{ criteria ?
<NavbarOne />
:
<NavbarTwo />
}
{children}
<Footer />
</div>
);
}
export default Layout;
__app.js
import Layout from '../components/layout/Layout';
import '../styles/styles.scss'
function MyApp({ Component, pageProps }) {
return (
<Layout criteria={true}>
<Component {...pageProps} />
</Layout>
);
}
export default MyApp
__admission.js
import Layout from "../components/layout/Layout";
const admission = () => {
return (
<Layout criteria={false}>
<div>
<h1>Admission</h1>
</div>
</Layout>
);
}
export default admission;
You can do something like
const Layout = ({ children, criteria }) => {
return (
<div>
{ criteria ? //ternary operator
<NavbarOne />
:
<NavbarTwo />
}
{children}
<Footer />
</div>
);
}
export default Layout;
And pass a boolean to your Layout as criteria to choose between Navbars
const Page1 = () => {
return (
<Layout criteria={true}> // will display navbar 1
<p>Im page 1</p>
</Layout>
);
}
export default Layout;
const Page2 = () => {
return (
<Layout criteria={false}> // will display navbar 2
<p>Im page 2</p>
</Layout>
);
}
export default Layout;
With three navbars you can do
const Layout = ({ children, navbarType }) => {
return (
<div>
{ navbarType == 1 && <NavbarOne />}
{ navbarType == 2 && <NavbarTwo />}
{ navbarType == 3 && <NavbarThree />}
{children}
<Footer />
</div>
);
}
export default Layout;
And pass a number to your Layout as navbarType to choose between Navbars
const Page1 = () => {
return (
<Layout navbarType={1}> // will display navbar 1
<p>Im page 1</p>
</Layout>
);
}
export default Layout;
const Page2 = () => {
return (
<Layout navbarType={2}> // will display navbar 2
<p>Im page 2</p>
</Layout>
);
}
export default Layout;
const Page3 = () => {
return (
<Layout navbarType={3}> // will display navbar 3
<p>Im page 3</p>
</Layout>
);
}
export default Layout;
If you prefer an option where, you want to add N number of navbars.
and select them by some index number.
import Footer from "../Footer";
import NavbarOne from "../Navbar/NavbarOne";
const Layout = ({ children, index }) => {
const navBarList = [<NavbarOne />, <NavbarTwo />];
const renderNavBar = (_index) => navBarList[_index];
return (
<div>
{renderNavBar(index)}
{children}
<Footer />
</div>
);
}
export default Layout;
In your where you calling your app, you should be calling it as such.
import Layout from './components/layout.js';
export default function Home() {
return (
<div>
<Layout index={1}>
<p>byebye</p>
</Layout>
</div>
);
}
You can pass a props called navbar to the Layout Component like this:
export default function PageOne() {
return (
<Layout navbar="one">
<div className="container">
<h1>Page One</h1>
</div>
</Layout>
)
}
export default function PageTwo() {
return (
<Layout navbar="two">
<div className="container">
<h1>Page Two</h1>
</div>
</Layout>
)
}
And later render the Navbar Components conditionally like this:
const Layout = ({ children, navbar }) => {
return (
<div>
{ navbar === 'one' && <NavbarOne />}
{ navbar === 'two' && <NavbarTwo />}
{children}
<Footer />
</div>
);
}
Related
I came across the following problem: I need to use another component's function inside a component:
header.js
export default function Header() {
const [showModalLogin ,setShowModalLogin] = useState(false);
return(
<>
<span>Hi, <Link onClick={() =>{ setShowModalLogin(true)}}>login</Link> </span>
{showModalLogin ? <LoginModal setShowModalLogin={setShowModalLogin}/> : ''}
</>
);
}
home.js
import Header from '../../components/header/header';
export default function Home() {
return (
<>
<Header />
<Link onClick={() =>{ setShowModalLogin(true)}}>open login</Link>
</>
}
How do I do in home.js to call the setShowModalLogin function that is in header.js ? I'm trying to use the context api too, but I still can't solve it.
You can just place useState in Header component and pass setShowModalLogin as props:
import Header from '../../components/header/header';
export default function Home() {
const [isShowModalLogin ,setShowModalLogin] = useState(false);
return (
<>
<Header isShowModalLogin={isShowModalLogin} setShowModalLogin={setShowModalLogin} />
<Link onClick={() => setShowModalLogin(true)}>open login</Link>
</>
}
export default function Header({ isShowModalLogin, setShowModalLogin }) {
return(
<>
<span>Hi, <Link onClick={() => setShowModalLogin(true)}>login</Link> </span>
{isShowModalLogin ? <LoginModal setShowModalLogin={setShowModalLogin}/> : ''}
</>
);
}
Then you can do it in this way:
Create Context
Save useState inside
Use it everywhere you need
export const YourContext = createContext();
export const YourProvider = ({ children }) => {
const [isShowModalLogin, setShowModalLogin] = useState(false);
const value = {
isShowModalLogin,
setShowModalLogin
};
return <YourContext.Provider value={value}>{children}</YourContext.Provider>;
}
// App.js
const App = () => {
return (
<YourProvider>
<AppContent />
</YourProvider>
)
}
So now you can use it like here:
import Header from '../../components/header/header';
export default function Home() {
const { isShowModalLogin, setShowModalLogin } = useContext(YourContext);
return (
<>
<Header isShowModalLogin={isShowModalLogin} setShowModalLogin={setShowModalLogin} />
<Link onClick={() => setShowModalLogin(true)}>open login</Link>
</>
}
I have an issue where my Next Auth useSession function is returning undefined on intial page load but works when hitting refresh on the page. Here is the code:
<Navigation />
import { useSession, signIn, signOut } from 'next-auth/client'
export default function Navigation() {
const [session] = useSession()
return (
<section className="navigation">
{!session ? (
<div onClick={handleSignin} className="loginLink">Login</div>
) : ( //Do Logged ins stuff )}
</section>
)
}
<Layout>
const Layout = (layoutProps) => (
<motion.main initial="hidden" animate="enter" exit="exit" variants={variants}>
<div className="Layout">
<Head>
<title>My Site</title>
</Head>
<Navigation />
<div className="Content">{layoutProps.children}</div>
<Footer />
</div>
</motion.main>
)
index.js
class Home extends React.Component {
render() {
return (
<Layout>
//Home page stuff
</Layout>
)
}
}
export default Home
App.js
render() {
const { Component } = this.props
return (
<>
<GlobalStyles />
<AnimatePresence
exitBeforeEnter
initial={false}
onExitComplete={() => window.scrollTo(0, 0)}
>
<Component key={Router.router != null ? Router.router.asPath : '/null'} {...this.props} />
</AnimatePresence>
</>
)
}
Simple stuff. Not sure what's going on. I hope that's enough to work with.
Try implementing Provider in App.js.
Here's an example from the documentation for v3: https://next-auth.js.org/v3/getting-started/example#add-session-state
//pages/_app.js
import { Provider } from "next-auth/client"
export default function App({ Component, pageProps }) {
return (
<Provider session={pageProps.session}>
<Component {...pageProps} />
</Provider>
)
}
You should add the session provider in your _app.js file.
This is my App.jsx:
import React from 'react';
import SoltM from './slot';
const App = ()=>{
return(
<>
<div>
<SlotM x="emoji1" y="emoji1" z="emoji1" />
<hr />
<SlotM x="emoji2" y="emoji3" z="emoji3" />
<hr />
<SlotM x="emoji3" y="emoji3" z="emoji3" />
<hr />
</div>
</>
)
}
export default App;
This is my SlotM.jsx component, in this, props are not displayed in True or False component.
import React from 'react';
const SlotM = (props) => {
return ( (props.x === props.y && props.y === props.z) )}
const True = (props) => {
let { x, y, z } = props
return (
<>
<div className="slot_inner">
<h1> {x} {y} {z} </h1>
<h1> This is Matching </h1>
</div>
</>
)
}
const False = (props) => {
let { x, y, z } = props
return (
<>
<div className="slot_inner">
<h1> {x} {y} {z} </h1>
<h1> This is not Matching. emoji1 </h1>
</div>
</>
)
}
export default SlotM;
This is my app.jsx
2:This is SlotM.jsx component in this props are not being displayed in True and False component
You can use spread operator like this:
<True {...props} /> <False {...props} />
I think you misunderstood sth. props.x === props.y && props.y === props.z) ) returns boolean value, not Function. How about this?
const SlotM = (props) => {
return (props.x === props.y && props.y === props.z) ? <TrueC {...props}/>: <FalseC {...props}/>
}
const TrueC = (props) => {
...
const FalseC = (props) => {
...
Here I have my modal component. I am making an app that I want a button to open this modal that I use in multiple places like opening a preview or deleting options.
import React from 'react';
import ReactDOM from 'react-dom';
import { CSSTransition } from 'react-transition-group';
import Backdrop from '../Backdrop/Backdrop';
import '../Modal/Modal.css';
const ModalOverlay = (props) => {
const content = (
<div className={`modal ${props.className}`} style={props.style}>
<header className={`modal__header ${props.headerClass}`}>
<h2>{props.header}</h2>
</header>
<form
onSubmit={
props.onSubmit ? props.onSubmit : (event) => event.preventDefault()
}
>
<div className={`modal__content ${props.contentClass}`}>
{props.children}
</div>
<footer className={`modal__footer ${props.footerClass}`}>
{props.footer}
</footer>
</form>
</div>
);
return ReactDOM.createPortal(content, document.getElementById('modal-hook'));
};
const Modal = (props) => {
return (
<React.Fragment>
{props.show && <Backdrop onClick={props.onCancel} />}
<CSSTransition
in={props.show}
mountOnEnter
unmountOnExit
timeout={200}
classNames="modal"
>
<ModalOverlay {...props} />
</CSSTransition>
</React.Fragment>
);
};
export default Modal;
And here I use this modal for showing up deleting options.
const DocumentItem = (props) => {
const [showConfirmModal, setShowConfirmModal] = useState(false);
const showDeleteWarningHandler = () => {
setShowConfirmModal(true);
};
const calcelDeleteHandler = () => {
setShowConfirmModal(false);
};
const confirmDeleteHandler = () => {
setShowConfirmModal(false);
console.log('Delete!');
};
return (
<React.Fragment>
<Modal
show={showConfirmModal}
onCancel={calcelDeleteHandler}
header="Are you sure?"
footerClass="document-item__modal-actions"
footer={
<React.Fragment>
<Button inverse onClick={calcelDeleteHandler}>
CANCEL
</Button>
<Button danger onClick={confirmDeleteHandler}>
DELETE
</Button>
</React.Fragment>
}
>
<p>
Do you want to proceed and delete this document? Please note that it
can't be undone thereafter.
</p>
</Modal>
</React.Fragment>
);
};
I don't understand why my screen goes all black, transparent but my modal doesn't show.
How can I fix this problem?
I am trying to display different Components when I click a button with my OnClick in the Render Function of my App.js.
I would like to show a certain component when the button is clicked and it hides the other components.
this is an example of what I want to do
return (
<div className={styles.container}>
<img className={styles.image} src={image} alt="COVID-19" />
//If the Country Button which is the default is clicked show This
<ThemeProvider theme = {theme}>
<CountryPicker handleCountryChange={this.handleCountryChange} />
<CountryCards CountryData = {CountryData} CountryYesterdayData = {CountryYesterdayData}/>
</ThemeProvider>
<Chart countrydailydata ={countrydailydata} />
//If the State Button is clicked show this
<ThemeProvider theme= {theme}>
<StatePicker handleStateChange={this.handleStateChange} />
<StateCards stateData= {stateData} yesterdayStateData = {yesterdayStateData}/>
</ThemeProvider>
//If the City Button is clicked show this
<CityPicker handleCityChange={this.handleCityChange}/>
<CityCard cityData = {cityData}/>
</div>
);
import React from 'react';
import logo from './logo.svg';
import './App.css';
function Statepicker(){
return(
<div>Statepicker</div>
)
}
function Statecards(){
return(
<div>Statecards</div>
)
}
function Countrypicker(){
return(
<div>Countrypicker</div>
)
}
function Countrycards(){
return(
<div>Countrycards</div>
)
}
class ThemeProvider extends React.Component{
constructor(props){
super(props);
this.state={country:true,states:false}
}
renderCountryOrState=()=>{
if(this.state.states){
return(<React.Fragment>
<Statepicker/>
<Statecards/>
</React.Fragment>)
}
return (
<React.Fragment>
<Countrypicker/>
<Countrycards/>
</React.Fragment>
)
}
render(){
return(
<div>
<button onClick={(e)=>{this.setState({country:true,states:false})}}>Select country</button>
<button onClick={(e)=>{this.setState({country:false,states:true})}}>Select state</button>
{this.renderCountryOrState()}
</div>
)
}
}
function App() {
return (
<ThemeProvider/>
);
}
export default App;
import React from "react";
import { Button, View } from "react-native";
import styles from "./App.module.css";
import {View} from 'react-native'
import image from "./images/covid1.png";
class App extends React.Component {
constructor(props){
super(props);
state = {
CityButton: false,
StateButton: false,
CountryButton: false
};
}
render() {
{ CountryButton, StateButton, CityButton } = this.state;
return (
<view>
<div className={styles.container}>
<img className={styles.image} src={image} alt="COVID-19" />
<Button title="Country Mode" onPress={() =>
this.setState({CountryButton: true}
)} />
<Button title="State Mode" onPress={() =>
this.setState({StateButton: true}
)} />
<Button title="County Mode" onPress={() =>
this.setState({CityButton: true}
)} />
{CountryButton && <div> Hello </div>}
{StateButton && <div> Hello </div>}
{CityButton && <div> Hello </div>}
</div>
</view>
);
}
}
export default App;