I'm trying to have restaurant cards displayed on my app and I'm not sure what would be the best way to have the image conditionally render according to which restaurant it is. This way it works but it is not optimal since if I have 10 I have to manually add all 10 imports and cases.
import Link from "next/link";
import React from "react";
import styles from "../styles/Card.module.css";
import kegLogo from "../assets/Keg.png";
import Image from "next/image";
import pizzaLogo from "../assets/pizza-logo.png";
function RestaurantCard({ id, title, description }) {
return (
<Link className={styles.link} href={`/restaurants/${title}`}>
<div className={styles.card}>
{id == 1 && (
<Image className={styles.image} src={kegLogo} alt={title} />
)}
{id == 2 && (
<Image className={styles.image} src={pizzaLogo} alt={title} />
)}
<div className={styles.content}>
<h3 className={styles.title}>{title}</h3>
<p className={styles.description}>{description}</p>
</div>
</div>
</Link>
);
}
export default RestaurantCard;
I'm having an issue where my navigation bar created with React-router-dom is not "scrolling/taking" me to the right place in the page, in fact, it is not taking me anywhere at all. This is a single page app
This is my App component where I set the Router and the paths of each component
import React, { useState, useReducer } from 'react'
import Footer from './Components/Footer';
import HeroSection from './Components/HeroSection'
import AboutMe from './Components/AboutMe';
import Projects from './Components/Projects';
import Modal from './Components/Modal';
import Form from './Components/Form'
import ScrollTop from './Components/ScrollTop';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
import NavBar from './Components/NavBar'
function App() {
const [show, setShow] = useReducer((p) => !p, false);
const [data, setData] = useState()
const handleData = (newData) => setData(newData)
return (
<div>
<Router>
<NavBar/>
<Switch>
<Route path='/aboutme' component={AboutMe}/>
<Route path='/projects' component={Projects}/>
<Route path='/contact' component={Form}/>
</Switch>
</Router>
<HeroSection/>
<AboutMe/>
<Projects setData={handleData} setShow = {setShow}/>
<Modal data={data} show={show} setShow={setShow} />
<Form/>
<ScrollTop></ScrollTop>
<Footer/>
</div>
)
}
export default App;
This is my NavBarwhere I set up the Links
import React, {useState} from 'react'
import {Link} from 'react-router-dom'
import * as FaIcons from 'react-icons/fa'
import * as AiIcons from 'react-icons/ai'
import {NavBarData} from './NavBarData'
const NavBar = () => {
const [sideBar, setSideBar] = useState(false)
const showSidebar = () => {
setSideBar(!sideBar)
}
return(
<>
<div className="navbar">
<Link to="#" className="menuBars">
<FaIcons.FaBars onClick={showSidebar}/>
</Link>
</div>
<nav className={sideBar ? "navMenuActive" : "navmenu"}>
<ul className="navMenuItems">
<li className="navbarToggle">
<Link to="#" className="menuBars">
<AiIcons.AiOutlineClose/>
</Link>
</li>
{NavBarData.map((item, index) => {
return(
<li key={index}>
<Link to={item.path}>
<span>{item.title}</span>
</Link>
</li>
)
})}
</ul>
</nav>
</>
)
}
export default NavBar
I have a separate file NavBarData where I store the data for each link
export const NavBarData = [
{
title: "About Me",
path: "/aboutme"
},
{
title: "Projects",
path: "/projects"
},
{
title: "Contact",
path: "/contact"
},
]
I have created a miniversion in codesandbox which kind of works frustrating enough but I still can't understand what I am doing wrong.
https://codesandbox.io/s/modest-currying-3o9oq?file=/src/App.js
🐛 Problem
Apparently, you are trying to scroll to a specific section using react-router-dom.
💡 Possible solutions
You can just use a HTML tag for that, using its href property with the section id.
💻 Code
sectionOne.js
function SectionOne() {
return (
<section id="sectionOne">
children
</section>
)
}
export default SectionOne;
NavBarData.js
export const NavBarData = [
{
title: "About Me",
path: "#sectionOne"
}
]
NavBar.js
function NavBar() {
return (
{NavBarData.map((item, index) => (
<li key={index}>
<a href={item.path}>
<span>{item.title}</span>
</a>
</li>
)}
)
export default NavBar;
💡 Extra tip
Using a dependency for this will just increase your bundle size, so unless it really has more than one specific route, it's not necessary to install.
Using the CSS property scroll-behavior: smooth, you can make the effect when the scrolling starts.
I finally find out why it wasn't working. Apparently in single page apps where you need to be scrolled to a certain point in the page rather than navigating, you are meant to use HashLink
I ran npm install --save react-router-hash-link and used a HashRouter in my App.js, going to leave the code here in case someday someone faces a similar issue.
App.js
import React, { useState, useReducer } from 'react'
import Footer from './Components/Footer';
import HeroSection from './Components/HeroSection'
import AboutMe from './Components/AboutMe';
import Projects from './Components/Projects';
import Modal from './Components/Modal';
import Form from './Components/Form'
import ScrollTop from './Components/ScrollTop';
import { HashRouter as Router, Route, Switch } from 'react-router-dom'
import NavBar from './Components/NavBar'
function App() {
const [show, setShow] = useReducer((p) => !p, false);
const [data, setData] = useState()
const handleData = (newData) => setData(newData)
return (
<div>
<Router>
<NavBar/>
<Switch>
<Route path='/aboutme' component={AboutMe}/>
<Route path='/projects' component={Projects}/>
<Route path='/contact' component={Form}/>
</Switch>
</Router>
<HeroSection/>
<AboutMe/>
<Projects setData={handleData} setShow = {setShow}/>
<Modal data={data} show={show} setShow={setShow} />
<Form/>
<ScrollTop></ScrollTop>
<Footer/>
</div>
)
}
export default App;
NavBar.js
import React, {useState} from 'react'
import {HashLink} from 'react-router-hash-link'
import * as AiIcons from 'react-icons/ai'
import * as FaIcons from 'react-icons/fa'
import {NavBarData} from './NavBarData'
const NavBar = () => {
const [sideBar, setSideBar] = useState(false)
const showSidebar = () => {
setSideBar(!sideBar)
}
return(
<>
<div className="navbar">
<HashLink to="#" className="menuBars">
<FaIcons.FaBars onClick={showSidebar}/>
</HashLink>
</div>
<nav className={sideBar ? "navMenuActive" : "navmenu"}>
<ul className="navMenuItems">
<li className="navbarToggle">
<HashLink to="#" className="menuBars">
<AiIcons.AiOutlineClose/>
</HashLink>
</li>
{NavBarData.map((item, index) => {
return(
<li key={index}>
<HashLink to={item.path} smooth>
<span>{item.title}</span>
</HashLink>
</li>
)
})}
</ul>
</nav>
</>
)
}
export default NavBar
EDIT:
For this to work you need to give the section/element you want to scroll to an id attribute and the HashLink to parameter will take /#idgiventoelement
I have webpage with React JS. The structure of site is MainContent.js --> Main.js -->ReactDOM render. I wanted to have modal popup when page opens so built modal component Modal.js--> DashModal.js which worked on its own project but not when imported to my site.
How do I import it correctly to have modal popup on load like it does on its own project? Thanks. I provided code below.
**Index JS**
import React from "react";
import ReactDOM from "react-dom";
import Main from "./containers/Main";
import { CookiesProvider } from "react-cookie";
import DashModal from "./components/DashModal"
// Import main sass file to apply global styles
import "./static/sass/style.scss";
ReactDOM.render(
<CookiesProvider>
<Main />
</CookiesProvider>,
document.getElementById("app")
);
**DashModal.js - the modal component**
import React from 'react'
import ReactDOM from 'react-dom'
import Modal from "../components/modal"
import "../components/modal.css"
import AppStore from "../static/images/AppLogoBlue.png";
class DashModal extends React.Component {
constructor(props) {
super(props)
this.state = {show:true}
}
showModal = () => {
this.setState({show: true});
};
hideModal = () => {
this.setState({show:false});
};
render() {
return(
<main>
<h1> React Modal </h1>
<Modal show = {this.state.show} handleClose ={this.hideModal}>
<div className = "left">
<a>
<img src={AppStore} alt= ""></img>
</a>
</div>
<div className = "left">
<button className= "button" onClick={this.hideModal}>Regular site </button>
</div>
</div>
</Modal>
<button type = "button" onClick = {this.showModal}>
open
</button>
</main>
);
}
}
const container = document.createElement("div");
document.body.appendChild(container);
ReactDOM.render(<DashModal/>, container);
export default DashModal;
**modal.js- part of modal which goes into DashModal.js**
import React from 'react';
import "./modal.css"
const Modal = ({ handleClose, show, children}) => {
const showHideClassName = show? "modal display-block" : "modal display-none"
return(
<div className={showHideClassName}>
<section style={ModalBox} className= "modal-main">
{children}
<button onClick={handleClose}>close</button>
</section>
</div>
);
};
export default Modal;
Thanks in advance
From my understanding, you want to open the modal by default when the <DashModal /> was imported into another component.
You can pass a prop show={true|false} to DashModal component <DashModal show={true} /> and inside that component add a componentDidMount lifecycle method
componentDidMount = () =>{
const {show} = this.props;
if(show){
this.showModal()
}
}
This will check the props and call the showModal when the component is loaded.
I have a Next.js app with two "layout" components:
/layouts/default-layout.tsx:
import { Footer } from '../components/footer';
import { Header } from '../components/header';
import './default-layout.scss';
export const DefaultLayout: React.FC = ({ children }) => (
<div className="d-flex flex-column vh-100">
<Header className="flex-shrink-0 fixed-top" />
<main className="flex-shrink-0">
{children}
</main>
<Footer className="mt-auto" />
</div>
);
/layouts/profile-layout.tsx:
import Helmet from 'react-helmet';
import 'bootstrap/scss/bootstrap.scss';
import './profile-layout.scss';
export const ProfileLayout: React.FC = ({ children }) => (
<div>
<Helmet
link={[
{ rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Poppins|Open+Sans|Dancing+Script&display=swap' },
]}
/>
{children}
</div>
);
Both layout components import some global SCSS styles.
Pages use one layout or the other like this:
const IndexPage: NextPage = () => (
<DefaultLayout>
{/* more content here */}
</DefaultLayout>
);
Most pages use the default layout, but my dynamic pages at /pages/profiles/[id].tsx use the profile layout. Navigating between pages works fine and each page uses the correct layout and correct SCSS files.
But if I type a page directly into the web browser's address bar, I get inconsistent results. Often the wrong SCSS file is used. Having the app open in another tab and navigating around seems to effect it too.
How can I have the correct SCSS styles loaded consistently?
I have two different layouts for front End and for admin End.I am including css files in render function in both layouts but css conflicts in both layouts.
Layout for front End
import React, { Component } from "react";
import { Switch, Redirect, Route } from "react-router-dom";
import Header from "components/FrontEnd/Header/Header";
import Footer from "components/FrontEnd/Footer/Footer";
import Menu from "components/FrontEnd/Menu/Menu";
class Frontend extends Component {
render() {
require("../../assets/fonts/frontEnd.css");
return (
<div className="section-frontEnd">
<Header {...this.props} />
<div id="main-panel" className="" ref="mainPanel">
<Switch>
//Routes Swichting ...
</Switch>
<Footer />
</div>
</div>
);
}
}
export default Frontend;
Layout for Admin End
import React, { Component } from "react";
import { Switch, Redirect } from "react-router-dom";
import Header from "components/Admin/Header/Header";
import Footer from "components/Admin/Footer/Footer";
import Sidebar from "components/Admin/Sidebar/Sidebar";
class Dashboard extends Component {
render() {
require('bootstrap/dist/css/Admin.css')
return (
<div className="wrapper">
<Sidebar />
<div id="main-panel" className="main-panel" ref="mainPanel">
<Header />
<Switch>
//Routes Swichting ...
</Switch>
<Footer />
</div>
</div>
);
}
}
export default Dashboard;
Please suggest me a better solution for this problem.
Note:I am not using webpack file in my project.
Below is my folder structure.
For each page section Make one superclass and Write all CSS based on that. This method won't conflict the layouts.
Example:
.section-frontEnd #main-panel{
// code
}
.admin-frontEnd #main-panel{
// code
}