i want to make that when i click the card then link to card1 .
BUT If i click the card then show 404 page, i don't know exactly.
this is the Card code:
import { useRouter } from "next/router";
import Link from "next/link";
function Card() {
return (
<section className="bg-white dark:bg-gray-900">
<div className="container px-6 py-10 mx-auto">
<h1 className="text-3xl font-semibold text-gray-800 capitalize lg:text-4xl dark:text-white">From the blog</h1>
<div className="grid grid-cols-1 gap-8 mt-8 md:mt-16 md:grid-cols-2">
<Link href="/Card1">
<a href="/Card1">
<div className="lg:flex rounded-lg hover:bg-gray-200" >
<img className="object-cover w-full h-56 rounded-lg lg:w-64" src="https://images.unsplash.com/photo-1515378960530-7c0da6231fb1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" alt="" />
<div className="flex flex-col justify-between py-6 lg:mx-6 ">
<div className="text-xl font-semibold text-gray-800 hover:underline dark:text-white pl-2">
How to use sticky note for problem solving
</div>
<span className="text-sm text-gray-500 dark:text-gray-300 pl-2">On: 20 October 2019</span>
</div>
</div>
</a>
</Link>
</div>
</div>
</section>
)
}
export default Card
This is the index code:
import { MODERN_BROWSERSLIST_TARGET } from 'next/dist/shared/lib/constants'
import Head from 'next/head'
import Feed from '../components/Feed'
import Header from '../components/Header'
import Modal from '../components/Modal'
import Post from '../components/Post'
import Card from '../components/Card'
import Card1 from '../components/Card1'
import Card2 from '../components/Card2'
export default function Home() {
return (
<div className='bg-gray-50 h-screen overflow-y-scroll scrollbar-hide'>
<Head>
<title>SQUARD-espark copy</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<Header />
{/* <Feed/>
<Modal /> */}
<Card />
</div>
)
}
This is the app.js code:
import '../styles/globals.css'
import {SessionProvider} from "next-auth/react";
import {RecoilRoot} from "recoil";
function MyApp({ Component, pageProps: {session, ...pageProps} }) {
return (
<SessionProvider session={session}>
<RecoilRoot>
<Component {...pageProps} />
</RecoilRoot>
</SessionProvider>
);
}
export default MyApp
THis is the Card1 code:
import { MODERN_BROWSERSLIST_TARGET } from 'next/dist/shared/lib/constants'
import Head from 'next/head'
import Feed from './Feed'
import Header from './Header'
import Modal from './Modal'
export default function Card1(props) {
return (
<div className='bg-gray-50 h-screen
overflow-y-scroll scrollbar-hide'>
{/* <Header /> */}
<Feed />
<Modal />
</div>
)
}
when i change to in index.js, then Card1 works. but when i try to link Card and Card1 then it is not working.
Related
This is exactly the code I copied in the video tutorial but I don't know why I got a blank white screen on my browser while the other (original) code doesn't get a blank screen after importing the { Link } from "react-router-dom"; How do you fix this? I can't find any solutions.
Here is my App.js
import React from "react";
import Navbar from "./components/Nav/Navbar";
function App () {
return (
<div>
<Navbar/>
</div>
);
}
export default App;
This is my Navbar.jsx
import React from "react";
import { Link } from "react-router-dom";
import Logo from "../../assets/Logo.png";
const Navbar = () => {
return (
<nav className="bg-white">
<div className="flex items-center font-medium justify-around">
<div>
<img src={Logo} alt="logo" className="md:cursor-pointer" />
</div>
<ul>
<li>
<Link to="/" className="py-7 px-3 inline-block">
Home
</Link>
</li>
</ul>
</div>
</nav>
);
};
export default Navbar;
I'm making a small imdb clone in reactJS and I just managed to add a carousel to the component that renders out movies. The problem is that the clickevent for each movie doesn't work anymore. What's the simplest way to solve this without rewriting the entire component?
I could add a onclick event to the carousel but then i have to return all the neccessary data from the movie component and later send it to moviePage which seems redundant
Home.js
import { React } from "react";
import SearchBox from "./components/SearchBox";
import Movie from "./components/Movie";
import { Carousel } from "react-responsive-carousel";
function Home(props) {
return (
<div className="App">
<div className="row d-flex align-items-center mt-4 mb-4">
<SearchBox
searchValue={props.searchValue}
setSearchValue={props.setSearchValue}
/>
</div>
<h1>Movies</h1>
<div className="block">
<Carousel onClickItem={console.log("you pressed")}>
{props.data.map((movie, index) => {
return (
<Movie
key={movie.id}
movie={movie}
placeMovie={props.placeMovie}
index={index}
/>
);
})}
</Carousel>
</div>
<h1>Recently viewed</h1>
<div className="inline-view">
{props.latestView.map((n) => {
return (
<img
key={n.id}
src={"https://image.tmdb.org/t/p/w500" + n.backdrop_path}
alt={n.poster_path}
/>
);
})}
</div>
</div>
);
}
export default Home;
Movie.js
import React from "react";
import { NavLink } from "react-router-dom";
export default function Movie(props) {
const handleClick = () => {
props.placeMovie(props.index);
};
return (
<div className="image-container d-flex justify-content-start m-3">
<div>
<NavLink onClick={handleClick} to={`/MoviePage`}>
<img
className="image-list"
src={"https://image.tmdb.org/t/p/w500" + props.movie.backdrop_path}
alt={props.movie.path}
/>
</NavLink>
<h4 class="font-weight-bold">{props.movie.title}</h4>
<h5 class="font-weight-light">Score:{props.movie.vote_average}</h5>
</div>
</div>
);
}
Heres the moviepage that displays more info when you click on a movie item
import React from "react";
function MoviePage(props) {
return (
<div>
<div className="card-single">
<div>
<img
className="image-single"
src={"https://image.tmdb.org/t/p/w500" + props.movie.backdrop_path}
alt={props.movie.path}
/>
<div class="card-title">
<h1 class="font-weight-bold">{props.movie.title}</h1>
</div>
<h3 class="card-text">{props.movie.overview}</h3>
<h5 class="font-weight-light">
Language: {props.movie.original_language}
</h5>
<h5 class="font-weight-light">
Release date: {props.movie.release_date}
</h5>
</div>
</div>
</div>
);
}
export default MoviePage;
I'm following a tutorial and I'm learning about props right now. I'm trying to use props to for my images' url's but they are not loading.
This is the code for my App.js:
import './App.css';
import Nav from './Components/Nav/Nav';
// import Main from './Components/Main/Main';
import Card from './Components/Card/Card';
function App() {
return (
<div className="App">
<Nav />
{/* <Main /> */}
<Card
img="image 12.png"
rating="5.0"
reviewCount={6}
country="USA"
title="Life Lessons with Katie Zaferes"
price={136}
/>
</div>
);
}
export default App;
And this is the code for my Card.js:
import React from "react";
import './Card.css'
import star from '../../images/Star 1.png'
export default function Card({
img, rating, reviewCount, country, title, price}) {
return (
<div className="bottom">
<img className="image" src={`../../images/${img}`} />
{/* <p className="availability">SOLD OUT</p> */}
<div className="stats">
<img className="star" src={star}></img>
<span>{rating}</span>
<span className="gray"> {reviewCount} • </span>
<span className="gray">{country}</span>
</div>
<p className="text1">{title}</p>
<p className="text2"><span className="bold">
From ${price}</span> / person
</p>
</div>
)
}
What should I do so that my pictures load?
First you need to import the local image instead of the url (the same way you did with star in Card.js)
import Nav from './Components/Nav/Nav';
import Card from './Components/Card/Card';
import image from "../../images/image 12.png" //this
function App() {
return (
<div className="App">
<Nav />
{/* <Main /> */}
<Card
img={image}
rating="5.0"
reviewCount={6}
country="USA"
title="Life Lessons with Katie Zaferes"
price={136}
/>
</div>
);
}
export default App;
and then you just pass the prop to the "src" of image
export default function Card({
img, rating, reviewCount, country, title, price}) {
return (
<div className="bottom">
<img className="image" src={img} />
{/* <p className="availability">SOLD OUT</p> */}
<div className="stats">
<img className="star" src={star}></img>
<span>{rating}</span>
<span className="gray"> {reviewCount} • </span>
<span className="gray">{country}</span>
</div>
<p className="text1">{title}</p>
<p className="text2"><span className="bold">
From ${price}</span> / person
</p>
</div>
)
}
this is because when using webpack you need to require the images so that webpack can load them.
alternatively, if you want the images to be loaded dynamically depending on a string you could leave the code as before and just replace the image src with an import
<img className="image" src={require (`../../images/${img}`)} />
or
<img className="image" src={require (`../../images/${img}`).default} />
I hope you have a nice day and it works for you :)
I have this error in my code: Error: Header(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
I'm creating my source tree, but I'm not understanding why I have this error. The imports should be correct.
Could someone help me?
Thanks in advance
App.js
import './App.css';
import Home from './Components/Views/Home/Home';
function App() {
return (
<>
<Home/>
</>
);
}
export default App;
Home.js
import Header from "../../UI/Header/Header";
export default function Home() {
return <Header />;
}
Header.js
import "./Header.css";
// import { classes } from "./Header.css";
export default function Header() {
<header>
<div className="overlay"></div>
<video playsInline="playsinline" autoPlay="autoplay" muted loop>
<source
src="https://storage.googleapis.com/coverr-main/mp4/Mt_Baker.mp4"
type="video/mp4"/>
</video>
{/* <div className={classes.container + "h-100"}> */}
<div className="container h-100">
<div className="d-flex h-100 text-center align-items-center">
<div className="w-100 text-white">
<h1 className="display-3">Video Header</h1>
<p className="lead mb-0">Using HTML5 Video and Bootstrap</p>
</div>
</div>
</div>
</header>
}
Sorce tree
src
|_ Components
| |_UI
| |_Header
| |_Header.js
|
|_ Views
| |_Home.js
|
|_ App.js
I miss the return on Header.js
import "./Header.css";
// import { classes } from "./Header.css";
export default function Header() {
return (
<header>
<div className="overlay"></div>
<video playsInline="playsinline" autoPlay="autoplay" muted loop>
<source
src="https://storage.googleapis.com/coverr-main/mp4/Mt_Baker.mp4"
type="video/mp4"/>
</video>
{/* <div className={classes.container + "h-100"}> */}
<div className="container h-100">
<div className="d-flex h-100 text-center align-items-center">
<div className="w-100 text-white">
<h1 className="display-3">Video Header</h1>
<p className="lead mb-0">Using HTML5 Video and Bootstrap</p>
</div>
</div>
</div>
</header>
);
}
In the below code I don't want to export Carousel and I just want to import everything except Carousel in other component.
import React from "react";
function Navbar() {
};
return (
<div className="navlabar">
<div className="brand_name_logo">
<Link to="/">
<img src={brand_name} alt="brand_logo" />
</Link>
</div>
<div className="dropdown">
<div>
<div id="explore__dropdown" className=" hide__ani hide__content">
<div className="explore__all__project">
<img src={exploreallproject}></img>
</div>
<div className="explore__top__10__find">
<img src={top10find}></img>
</div>
</div>
<Carousel climber1="CLMBR" />
</div>
);
}
export default Navbar;