While developing a website for a class (I used a youtube tutorial to build the site), I am having this error show up in the console:
Although the site renders locally, this causes issues when I try to deploy it, as you can imagine. So I found the documentation for the React.forwardRef() and I implemented it like this in my code:
import React from 'react';
import Image from "next/image";
import styles from "../styles/PizzaCard.module.css";
import Link from 'next/link';
const PizzaCard = React.forwardRef(({pizza}, ref) => {
return <input ref={ref}/>>(
<div className={styles.container}>
<Link href={`/product/${pizza._id}`} passHref>
<Image src={pizza.img} alt="" width="500" height="500"/>
</Link>
<h1 className={styles.title}>{pizza.title}</h1>
<span className={styles.price}>${pizza.prices[0]}</span>
<p className={styles.desc}>
{pizza.desc}
</p>
</div>
);
});
export default PizzaCard;
And this in my PizzaList file:
import React from "react";
import styles from "../styles/PizzaList.module.css";
import PizzaCard from "./PizzaCard";
const PizzaList = React.forwardRef(({pizzaList}, ref) => {
return <input ref={ref}/>> (
<div className = {styles.container}>
<h1 className={styles.title}>The Mellowist Pizza in Town!</h1>
<p className={styles.desc}>
Mellow Yellow Pizzaria is a local Family Owned business providing
the community with tasty pizza made with Heart and Soul!
</p>
<div className={styles.wrapper}>
{pizzaList.map((pizza) => (
<PizzaCard key={pizza._id} pizza={pizza} />
))}
</div>
</div>
)
})
export default PizzaList
And here is where PizzaList is called:
import axios from "axios";
import Head from "next/head";
import Image from "next/image";
import { useState } from "react";
import Add from "../components/Add";
import AddButton from "../components/AddButton";
import Featured from "../components/Featured";
import PizzaList from "../components/PizzaList";
import styles from "../styles/Home.module.css";
export default function Home({pizzaList, admin}) {
const [close, setClose] = useState(true)
return (
<div className={styles.container}>
<Head>
<title>Mellow Yellow Pizzaria</title>
<meta name="description" content="Created by Yellow project team at CTU" />
<link rel="icon" href="/favicon.ico" />
</Head>
<Featured/>
{admin && <AddButton setClose={setClose}/>}
<PizzaList pizzaList={pizzaList} />
{!close && <Add setClose={setClose}/>}
</div>
)
}
export const getServerSideProps = async (ctx) =>{
const myCookie = ctx.req?.cookies || ""
let admin = false
if(myCookie.token === process.env.TOKEN){
admin = true
}
const res = await axios.get("http://localhost:3000/api/products")
return{
props:{
pizzaList:res.data,
admin,
}
}
}
Although this made the console errors go away, now my pizza products do not display, as you can see:
So, what am I doing wrong? If you need me to post more of my code, please let me know and I will, I'm not sure what all you'd need to see.
EDIT:
Here is my original code before adding the forwardRef()...this is the code that gives me the console errors in the first screenshot, I added the forwardRef() to PizzaCard and PizzaList because those are 2 spots that the console suggested I check (the list of "at ..." in the console window)
PizzaCard:
import React from 'react';
import Image from "next/image";
import styles from "../styles/PizzaCard.module.css";
import Link from 'next/link';
const PizzaCard = ({pizza}) => {
return (
<div className={styles.container}>
<Link href={`/product/${pizza._id}`} passHref>
<Image src={pizza.img} alt="" width="500" height="500"/>
</Link>
<h1 className={styles.title}>{pizza.title}</h1>
<span className={styles.price}>${pizza.prices[0]}</span>
<p className={styles.desc}>
{pizza.desc}
</p>
</div>
);
};
export default PizzaCard;
PizzaList:
import styles from "../styles/PizzaList.module.css";
import PizzaCard from "./PizzaCard";
const PizzaList = ({pizzaList}) => {
return (
<div className = {styles.container}>
<h1 className={styles.title}>The Mellowist Pizza in Town!</h1>
<p className={styles.desc}>
Mellow Yellow Pizzaria is a local Family Owned business providing
the community with tasty pizza made with Heart and Soul!
</p>
<div className={styles.wrapper}>
{pizzaList.map((pizza) => (
<PizzaCard key={pizza._id} pizza={pizza} />
))}
</div>
</div>
)
}
export default PizzaList
Here is a link to my github with all of the code:
https://github.com/InvisibleH3R0/mellowyellowpizzaria
Original Issue Fixed
So the fix for the ref issue was to wrap the image (in the first set of code I posted) in <a></a>
But now...when I load the site (locally) the homepage starts off just white, if I refresh the page it comes up...but when I inspect the page when first loading, it shows a internal server (500) error:
This leads me to believe the issue lies in the api/products or api/options code, that is where the GET methods are
Related
I want to display Google Adsense on my gatsby.js site. However, it is not showing up.
LeftSideSection is called in Layout.js.
I am running it in a local environment.
And I don't have a domain for my site.
I don't register my site's domain in GoogleAdsense and
I have created an Ad unit.
export
[
googleAdsense.js
import React from "react"
import * as styles from "./LeftSideSection.module.css";
import {Adsense} from './googleAdsense'
import React, { useEffect } from 'react'
export const Adsense = ({ path }) => {
useEffect(() => {
;(window.adsbygoogle = window.adsbygoogle || []).push({})
}, [path])
return (
<ins
className="adsbygoogle"
style={{ "display": "block" , textAlign: "center",width:`100%` ,height:`100%`}}
data-ad-client="ca-pub-xxxxxxxxx"
data-ad-slot="xxxxxxx"
data-ad-format="auto"
data-full-width-responsive="true"
data-adtest="on"
/>
)
}
LeftSideSection.js
const LeftSideSection = (props) => {
const { title, children } = props;
const path = props.location?.pathname || '';
return (
<section className={styles.container}>
<p>ads</p>
<Adsense path={path} />
</section>
);
};
export default LeftSideSection;
Layout.js
import React from "react";
import Header from "./Header";
import * as styles from "./Layout.module.css";
import 'bootstrap/dist/css/bootstrap.min.css';
import herderImage from '../images/header.png'
import {Navbar} from 'react-bootstrap'
import RightSideSection from "./RightSideSection";
import LeftSideSection from "./LeftSideSection";
import { Link } from "gatsby";
import { useBreakpoint } from 'gatsby-plugin-breakpoints';
import HeaderRss from "./HeaderRss";
const Layout = ({ children }) => {
const breakPoints = useBreakpoint();
return (
breakPoints.pc ?
<>
<Navbar.Brand as={Link} href='/' >
<img src={herderImage} style={{width:`100%`,height:`200px`,}}/>
</Navbar.Brand>
<Header />
<div className={styles.container}>
<div className={styles.LeftSideSection}>
<LeftSideSection />
</div>
<div className={styles.RightSideSection}>
<RightSideSection />
</div>
<div className={styles.mainPane}>
<div className={styles.headerRssContainer}>
<HeaderRss/>
</div>
{children}
</div>
</div>
<footer className={styles.footer}>
© {new Date().getFullYear()},
{`title`}
</footer>
</>:
);
};
export default Layout;
enter image description here
You are not loading the <script> that the console is suggesting. Try using the Helmet component to do something like:
import React from "react"
import * as styles from "./LeftSideSection.module.css";
import {Adsense} from './googleAdsense'
import React, { useEffect } from 'react'
export const Adsense = ({ path }) => {
useEffect(() => {
;(window.adsbygoogle = window.adsbygoogle || []).push({})
}, [path])
return <>
<Helmet>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
</Helmet>
<ins
className="adsbygoogle"
style={{ "display": "block" , textAlign: "center",width:`100%` ,height:`100%`}}
data-ad-client="ca-pub-xxxxxxxxx"
data-ad-slot="xxxxxxx"
data-ad-format="auto"
data-adtest="on"
data-full-width-responsive="true"
/>
</>
}
I still don't know what's import {Adsense} from './googleAdsense', this line may collide with the naming of the component that you are defining (both are Adsense). If the issue persists, try changing the name.
To make the ads available on localhost, set the data-adtest as on.
In addition, you can try using a React-based solution like the one that react-adsense suggests.
Double-check and remove AdBlocks (or similar).
However, the image of the ad did not show up.
This can be caused by the localhost. Try deploying the site to check it in a real domain.
i am currently building a shopping website . i finished the homepage and i have to make routing for other pages
i have 3 main files: App.js, Menuitem.js (which is to execute props), and Homepage.js (which also is used to apply executing props from sections array which includes titles and background images and sections paths)
this is the App js
import React from "react";
import Homepage from './Homepage'
import "./styles.css";
import './Homepage.css'
import {Route, Switch} from "react-router-dom";
const Hatspage=function() {
return(
<div>
<h1>
Hats page
</h1>
</div>
)
}
function App() {
return (
<div>
<Switch>
<Route exact path='/'component={Homepage}/>
<Route path='/hats'component={Hatspage}/>
</Switch>
</div>
);
}
export default App
Menuitem.js
import React from 'react'
import {WithRouter} from 'react'
const Menuitem= function(props){
return(
<div className='card' style={{ backgroundImage: `url(${props.imageUrl})` }} >
<div className='text-frame'>
<h1 className='title'>{props.title}</h1>
<p className='subtitle'>shop now</p>
</div>
</div>
)
}
export default Menuitem
Homepage.js
import React from "react";
import sections from './directory-components';
import Menuitem from "./menu-item-components";
const arrayOne=[sections.slice(0,3)]
const arrayTwo=[sections.slice(3,)]
function extract(item){
return(
<Menuitem
title={item.title} imageUrl={item.imageUrl}/>
)
}
function Homepage(){
return(
<div className='directory-menu'>
<div className='content'>
{sections.slice(0,3).map(extract) }
</div>
<div className='second'>
{sections.slice(3,).map(extract) }
</div>
</div>
)
}
export default Homepage
so i need for example when i click on hats picture i switch to hats page . how to do that
image attached
Thanks in advance
reactjs routing
You can do two different approaches. Both of them will require an extra prop that will be the actual url you want to access when clicking the menu item.
Assuming you modify your section array to look like this:
[{title: 'Your title', imageUrl: 'your-image.jpg', linkUrl: '/hats'}]
And you modify your extract function to add the url value as a prop in the MenuItem component:
function extract(item){
return(
<Menuitem
title={item.title} imageUrl={item.imageUrl} linkUrl={item.linkUrl} />
)
}
You can do this
First one: Using a Link component from react router:
import React from "react";
import { Link } from "react-router-dom";
const Menuitem= function(props){
return(
<Link to={props.linkUrl}>
<div className='card' style={{ backgroundImage: `url(${props.imageUrl})`
}} >
<div className='text-frame'>
<h1 className='title'>{props.title}</h1>
<p className='subtitle'>shop now</p>
</div>
</div>
</Link>
)
}
Now you will have to add extra styling because that will add a regular a tag, but I like this approach because for example you can open the link in a new tab since it is a regular link.
Using the history prop.
import React from "react";
import { useHistory } from "react-router-dom";
const Menuitem= function(props){
const history = useHistory()
const goToPage = () => history.push(props.linkUrl)
return(
<div className='card' style={{ backgroundImage: `url(${props.imageUrl})`
}} onClick={goToPage} >
<div className='text-frame'>
<h1 className='title'>{props.title}</h1>
<p className='subtitle'>shop now</p>
</div>
</div>
)
}
This approach is a basic on click so if you press the component it will go to the selected page, this will work but keep in mind that event bubbling will be harder if you add more on clicks inside the menu item, so please be aware of that.
You should fire an event inside your MenuItem in order to redirect the user
import { useHistory } from 'react-router-dom'
const history = useHistory()
<img onClick={() => history.push('/hats')} />
signinL is declared but never used error, please help, it is an import that I have taken and used as a component still it's showing as error
import React from 'react'
import { Link } from 'react-router-dom'
import signinL from './signinL'
const Navbar = () => {
return (
<nav className="nav-wrapper grey darken-3">
<div className="container">
<Link to='/' className="brand-logo">My Peral</Link>
<signinL />
</div>
</nav>
)
}
export default Navbar
I have the following code that produces a Card UX Component.:
import React from 'react';
import image1 from '../images/swimming_sign.jpg';
const Card = props =>{
return(
<div className="card text-center">
<div className="overflow">
<img src="image1" alt='Image 1'/>
</div>
</div>
);
}
export default Card;
I would like to know how I can call it in one of my pages that simply produces an image at the top half of the page, and also what is the command for importing the "bootstrap.min.css" from "node_modules" in this page. The code for the page currently looks like this:
import React from 'react'
import Hero from '../Components/Hero';
import Card from '../Components/ServicesUi';
export default function Services() {
return (
<Hero hero="servicesHero"/>
);
}
Card Import
import React from 'react';
let image1 = '../images/swimming_sign.jpg';
const Card = props =>{
return(
<div className="card text-center">
<div className="overflow">
<img src={image1} alt='Image 1'/>
</div>
</div>
);
}
export default Card;
import React from 'react'
import Hero from '../Components/Hero';
import Card from '../Components/ServicesUi';
export default function Services() {
return (
<Card/>
<Hero hero="servicesHero"/>
);
}
To import css file from node modules, please place the link statement in your index.html file
<link rel="stylesheet" href="./node_modules/bootstrap/bootstrap.min.css">
I am using react reveal and doing an image slide up transition but the image is not showing, I have given the code below as well as the output image. I have added a picture which shows whats happening. the link in the picture was supposed to be an image but it's showing just Link
import React from 'react';
import { Link } from 'react-router-dom';
import Reveal from 'react-reveal';
import 'animate.css/animate.css';
const generateBlocks = ({blocks}) =>{
if(blocks){
return blocks.map((item)=>{
const styles = {
background:`url('/images/blocks/${item.image}') no-repeat `
}
return(
<Reveal key={item.id} effect="animated fadeInUp"
className={`item ${item.type}`}>
<div className="veil"></div>
<div
className="image"
style={styles} >
</div>
<div className="title">
<Link to={item.link}>{item.title}</Link>
</div>
</Reveal>
)
})
}
}
const Blocks = (props) =>{
return(
<div className ="home_blocks">
{generateBlocks(props)}
</div>
)
}
export default Blocks;][1]
Heve you tried to import the right component from Reveal:
import Reveal from 'react-reveal/Reveal';
Have a look into the Documentation: https://www.react-reveal.com/examples/common/custom/