React Carousel and onClick events - reactjs

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;

Related

React JS Navigation Bar

App.js
import NewsSec from "./News/NewsSec";
import ScoreSec from "./ScoreSec/ScoreSec";
import Menu from "./Sidebar/Menu";
import "./styles.css";
import { GiHamburgerMenu } from "react-icons/gi";
import React, { useState } from "react";
export default function App() {
const [showMediaIcons, setShowMediaIcons] = useState(false);
return (
<div className="App">
<div className="head">
<div className="navicon">
<a
href="/"
onClick={() => {
setShowMediaIcons(!showMediaIcons);
}}
>
<GiHamburgerMenu />{" "}
</a>
</div>
<div className="logo">Project</div>
<div className="weather">weather section</div>
</div>
<div className="main">
<div className="nav-section">
<Menu classes={showMediaIcons ? "mobile-view navbar" : "navbar"} />
</div>
<div className="news-section">
<NewsSec />
</div>
<div className="score-section">
<ScoreSec />
</div>
</div>
</div>
);
Menu.js
import React from "react";
import "./Navbar.css";
const Menu = (props) => {
return (
<>
<div className={props.classes}>
<ul>
<li>Home</li>
<li>News</li>
<li>Sports</li>
<li>Weather</li>
<li>About</li>
</ul>
</div>
</>
);
};
export default Menu;
i was trying to make a responsive navigation bar. the navigation bar is actually a sidebar. i used the props to pass the 'className' from App.js to Menu.js because i called the function in App.js
For testing, I tried changing the nav colour to Red. But on clicking Hamburger icon, the colour changes to Red and changed back to normal automatically. Please help folks
It seems that a might be reloading the page with href="/", resetting the state showMediaIcons to its initial value of false.
If the purpose of GiHamburgerMenu is to toggle display for Menu, it might not need to be wrapped in a, instead try add the onClick on the icon or on the wrapping div:
<div className="navicon">
<GiHamburgerMenu
onClick={() => {
setShowMediaIcons((prev) => !prev);
}}
/>
</div>

Local image not loading when using props in reactjs

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 :)

How to place a rendered element in a div in ReactJs

I'm new in ReactJs and I only know a few things as of now. I'm trying to create this Google map with directions which is successful
MapRender.js
import React from 'react';
import { render } from 'react-dom';
import Map from './mapProps';
//import './style.css';
const googleMapsApiKey = "API_KEY";
export default function FinalMap() {
const FinalMap = props => {
const {places} = props;
const {
loadingElement,
containerElement,
mapElement,
defaultCenter,
defaultZoom
} = props;
return (
<Map
googleMapURL={
'https://maps.googleapis.com/maps/api/js?key=' +
googleMapsApiKey +
'&libraries=geometry,drawing,places'
}
markers={places}
loadingElement={loadingElement || <div style={{height: `100%`}}/>}
containerElement={containerElement || <div style={{height: "80vh"}}/>}
mapElement={mapElement || <div style={{height: `100%`}}/>}
defaultCenter={defaultCenter || {lat: 25.798939, lng: -80.291409}}
defaultZoom={defaultZoom || 13}
/>
);
};
const places = [
{latitude:14.7539407,longitude:121.0338431},
{latitude: 14.625981794368357,longitude: 121.06170033978614},
]
render(<FinalMap defaultZoom={12} places={places} />, document.getElementById('root'));
}
And this is my App.js
import React from 'react';
import picture1 from '../../src/picture1.jpg';
import RechartBar from '../postlist/Rechart-Bar';
import RechartLine from '../postlist/Rechart-Line';
import driverstat from '../driverprofiles/driverstat';
import AppMap from './Maps/map';
import MapRender from './Maps/MapRender';
function Home() {
return (
<div className="Bodydiv">
<div className="homediv">
<div className="userdiv">
<div className="userdiv-profile">
<div className="userdiv-profile-photo">
<img src={picture1} className="photo" alt="picture1"></img>
</div>
<div className="userdiv-profile-name">
</div>
<div className="userdiv-profile-name">
Name:
</div>
<div className="userdiv-profile-name">
Driver ID:
</div>
<div className="userdiv-profile-name">
Plate Number:
</div>
<div className="userdiv-profile-name">
Status:
</div>
</div>
<div className="userdiv-stats">
Statistics
{driverstat.map((item, index) => {
return (
<li key={index} className={item.cName}>
{item.icon}
</li>
);
})}
<h4 class="view-history">View History</h4>
<input type="button" className="backtodrivers-btn" alt="back" value="Back"/>
</div>
</div>
<div className='mapdiv'>
<MapRender/>
</div>
</div>
<RechartBar/>
<RechartLine/>
</div>
);
}
export default Home;
The problem is It does run but it made my other elements go away because the map was rendered as seen in the last part of my MapRender.js, what I wanted to do is place this in a component and then call that component in my App.js (Similar to what I have done in RechartBar and RechartLine at the end of my App.js.
Thanks
You are replacing entire app with FinalMap component using this line.
Remove this line from MapRenderer.js
render(<FinalMap defaultZoom={12} places={places} />, document.getElementById('root'));
import React from 'react';
import { render } from 'react-dom';
import Map from './mapProps';
//import './style.css';
const googleMapsApiKey = "API_KEY";
export default function FinalMap(props) {
const {
places,
loadingElement,
containerElement,
mapElement,
defaultCenter,
defaultZoom
} = props;
return (
<Map
googleMapURL={
'https://maps.googleapis.com/maps/api/js?key=' +
googleMapsApiKey +
'&libraries=geometry,drawing,places'
}
markers={places}
loadingElement={loadingElement || <div style={{height: `100%`}}/>}
containerElement={containerElement || <div style={{height: "80vh"}}/>}
mapElement={mapElement || <div style={{height: `100%`}}/>}
defaultCenter={defaultCenter || {lat: 25.798939, lng: -80.291409}}
defaultZoom={defaultZoom || 13}
/>
);
};
Then in App.js
import React from 'react';
import picture1 from '../../src/picture1.jpg';
import RechartBar from '../postlist/Rechart-Bar';
import RechartLine from '../postlist/Rechart-Line';
import driverstat from '../driverprofiles/driverstat';
import AppMap from './Maps/map';
import MapRender from './Maps/MapRender';
function Home() {
return (
<div className="Bodydiv">
<div className="homediv">
<div className="userdiv">
<div className="userdiv-profile">
<div className="userdiv-profile-photo">
<img src={picture1} className="photo" alt="picture1"></img>
</div>
<div className="userdiv-profile-name">
</div>
<div className="userdiv-profile-name">
Name:
</div>
<div className="userdiv-profile-name">
Driver ID:
</div>
<div className="userdiv-profile-name">
Plate Number:
</div>
<div className="userdiv-profile-name">
Status:
</div>
</div>
<div className="userdiv-stats">
Statistics
{driverstat.map((item, index) => {
return (
<li key={index} className={item.cName}>
{item.icon}
</li>
);
})}
<h4 class="view-history">View History</h4>
<input type="button" className="backtodrivers-btn" alt="back" value="Back"/>
</div>
</div>
<div className='mapdiv'>
<MapRender places={[
{latitude:14.7539407,longitude:121.0338431},
{latitude: 14.625981794368357,longitude: 121.06170033978614},
]}/>
</div>
</div>
<RechartBar/>
<RechartLine/>
</div>
);
}
export default Home;

export partial component in React functional component

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;

How to create collapsible onclick of div in Reactjs?

How to make collapsible onclick of <div className="content-header"> in Reactjs
As I am beginner in Reactjs how can I create a function that will handle onclick div section to make that collapsible
import React from "react";
import "./styles.css";
export default function App() {
return (
<div className="main">
<div className="content">
<div className="content-header">
<p>STEM</p>
</div>
<div className="content-body">
I am a STEM
<br></br>
I am STEM
</div>
</div>
<div className="content">
<div className="content-header">
<p>STEM</p>
</div>
<div className="content-body">
I am a STEM
<br></br>
I am STEM
</div>
</div>
</div>
);
}
This is how it look like
import React from "react";
import "./styles.css";
export default function App() {
const [isShowBody, setIsSHowBody] = React.useState(false);
const onClickHandler = () => {
setIsSHowBody(isShowBody => !isShowBody);
}
return (
<div className="main">
<div className="content">
<div className="content-header" onClick={onClickHandler}>
<p>STEM</p>
</div>
{ isShowBody && <div className="content-body">
I am a STEM
<br></br>
I am STEM
</div>}
</div>
</div>
);
}
try :
import {React,useState} from "react";
import "./styles.css";
export default function App() {
const [open,setOpen] = useState(false);
const toggle = () => {setOpen(!open)}
return (
<div className="main">
<div className="content">
<div className="content-header" onClick={toggle}>
<p>STEM</p>
</div>
{open?
<div className="content-body">
I am a STEM
<br></br>
I am STEM
</div>:null
}
</div>
</div>
);
}
if you have multiple, you have to use open array :
import {React,useState} from "react";
import "./styles.css";
export default function App() {
const [open,setOpen] = useState([false,false,false]);
const toggle = (i) => {let copyOpen = open; open[i] = !open[i] ;setOpen(copyOpen)}
return (
<div className="main">
<div className="content">
<div className="content-header" onClick={()=>toggle(0)}>
<p>STEM</p>
</div>
{open[0]?
<div className="content-body">
I am a STEM
<br></br>
I am STEM
</div>:null
}
<div className="content-header" onClick={()=>toggle(1)}>
<p>STEM</p>
</div>
{open[1]?
<div className="content-body">
I am a STEM
<br></br>
I am STEM
</div>:null
}
<div className="content-header" onClick={()=>toggle(2)}>
<p>STEM</p>
</div>
{open[2]?
<div className="content-body">
I am a STEM
<br></br>
I am STEM
</div>:null
}
</div>
</div>
);
}

Resources