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/
Related
This is my App.js. Here, I call the "Profile" Component.
import './App.css';
import Profile from "./Profile"
function App() {
return (
<div className="App">
<Profile />
</div>
);
}
export default App;
Then, inside Profile.js, I call Card component and inside the Card component, I've enclosed an image.
import React from 'react'
import Card from './Card'
import styles from "./Profile.module.css"
import image1 from "./assets/profile1.png"
const Profile = () => {
return (
<Card>
<div>
<img src={image1} alt="" />
</div>
</Card>
)
}
export default Profile
Inside of Card component, I've just applied some CSS to make it look like a Card.
import React from 'react'
import styles from "./Card.module.css"
const Card = () => {
return (
<div className={styles.card}>
</div>
)
}export default Card
This is my folder structure.
I'm really confused why the image isn't getting showed up. Currently this is the output I'm getting.
I've restarted the server as well. But it's not getting fixed.
your card doesn't have a child component return maybe that could be the problem
import React from 'react'
import styles from "./Card.module.css"
const Card = ({children}) => {
return (
<div className={styles.card}>
{children}
</div>
)
}
export default Card
try this
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
I have a simple react page so far where I just have a home component which seems to work fine it is made up from the code I have included what I am trying to do is to render another component the main component when the button that is part of the home component is clicked but it keeps giving me the error and I have no idea what I am doing wrong in this case I have included code for all of my files the main component isn't fully finished right now it was just to test what I am currently doing that I added a paragraph placeholder any help is appreciated thanks
Error: Unknown error
(/node_modules/react-dom/cjs/react-dom.development.js:3994) !The above
error occurred in the component: at Main (exe1.bundle.js:94:3)
at div at App (exe1.bundle.js:31:52) Consider adding an error boundary
to your tree to customize error handling behavior. Visit
https://reactjs.org/link/error-boundaries to learn more about error
boundaries. !Error: Unknown error
Home Component:
import React from "react";
export default function Home(props) {
return (
<main className="home-main">
<div className="content-container">
<div className="bottom-corner">
</div>
<div className="top-corner">
</div>
<h1 className="home-heading">Quizzical</h1>
<p className="home-description">Some description if needed</p>
<button
className="start-button"
onClick={props.handleClick}
>Start quiz
</button>
</div>
</main>
)
}
Main Component:
import react from "react";
export default function Main() {
return (
<h1>hello </h1>
)
}
App:
import React from "react";
import Main from "./components/Main"
import Home from "./components/Home"
export default function App() {
const [startQuiz, setStartQuiz] = React.useState(false);
function clickStart() {
// flip the state on each click of the button
console.log(startQuiz);
setStartQuiz(prevState => !prevState);
}
return (
<div>
{console.log("start", startQuiz)}
{startQuiz ?
<Main />
:
<Home handleClick={clickStart}/> }
}
</div>
)
}
Index:
import React from "react"
import ReactDOM from "react-dom"
import App from "./App";
ReactDOM.render(<App />, document.getElementById("root"))
I think you just have a typo here
import react from "react";
should be
import React from "react";
You can try changing your setStartQuiz to just simply negate the current startQuiz value instead of using prevState.
function clickStart() {
// flip the state on each click of the button
console.log(startQuiz);
setStartQuiz(!startQuiz);
}
Here's a working example based on your code.
code sandbox
import React, { useState } from "react";
const Main = () => <h1>hello </h1>;
const Home = (props) => {
return (
<main className="home-main">
<div className="content-container">
<div className="bottom-corner"></div>
<div className="top-corner"></div>
<h1 className="home-heading">Quizzical</h1>
<p className="home-description">Some description if needed</p>
<button className="start-button" onClick={props.handleClick}>
Start quiz
</button>
</div>
</main>
);
};
export default function App() {
const [startQuiz, setStartQuiz] = useState(false);
return (
<div>
{startQuiz && <Main />}
{!startQuiz && <Home handleClick={() => setStartQuiz(true)} />}
</div>
);
}
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')} />
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">