I am trying to click images with using react-responsive-carousel. And on Click it should direct to the Link onClickItem. I have tried it with <Link> and <a>. Doesnt work.
const onClickItem = () => console.log('Item');
<Carousel
showStatus={false}
showThumbs={false}
autoPlay={true}
infiniteLoop={true}
swipeable={false}
emulateTouch={true}
//#ts-ignore
animationHandler="fade"
transitionTime={5000}
onClickItem={onClickItem}
>
{banners.map((banner) => (
<div className="block" key={banner.id}>
<Link href={banner.href}>
<a>
<div>
<Image src={banner.image} width={768} height={400} alt={'Banner image'} />
</div>
</a>
</Link>
</div>
))}
</Carousel>
How to detect on Click with this component?
define func on click
const doClick = (bannerId) => {console.log(bannerId)}
add some func in your map
{banners.map((banner) => ( <div onClick={doClick(banner.id)} className="block" key={banner.id}> <Link href={banner.href}> <a> <div> <Image src={banner.image} width={768} height={400} alt={'Banner image'} /> </div> </a> </Link> </div> ))}
Related
sorry about title name, i cant name my problem, but basically: My navbar dropdown menu looks like this:
Home Dropdown 🠗 Contact
Sign In
Register
Problem is, when somebody clicks on SignIn and then clicks on Register (and conversely), the url will look like this: http://localhost:3000/signupform/signin so browser will tell that this page does not exist.
But it should look like that: http://localhost:3000/signupform
Thanks everybody so much.
Navbar code (without imports):
const Navbar = () => {
const [isMenu, setisMenu] = useState(false);
const [isResponsiveclose, setResponsiveclose] = useState(false);
const toggleClass = () => {
setisMenu(isMenu === false ? true : false);
setResponsiveclose(isResponsiveclose === false ? true : false);
};
let boxClass = ["main-menu menu-right menuq1"];
if(isMenu) {
boxClass.push('menuq2');
}else{
boxClass.push('');
}
const [isMenuSubMenu, setMenuSubMenu] = useState(false);
const toggleSubmenu = () => {
setMenuSubMenu(isMenuSubMenu === false ? true : false);
};
let boxClassSubMenu = ["sub__menus"];
if(isMenuSubMenu) {
boxClassSubMenu.push('sub__menus__Active');
}else {
boxClassSubMenu.push('');
}
return (
<header>
<nav>
<div className="container">
<div className="row">
<div className="header__middle__logo">
<Link to exact activeClassName='is-active' to="/">
<FontAwesomeIcon icon={faMagnifyingGlass} size="4x" color="white" alt="logo" />
</Link>
</div>
<div className="header__middle__menus">
<nav className="main-nav " >
{/* Responsive Menu Button */}
{isResponsiveclose === true ? <>
<span className="menubar__button" style={{ display: 'none' }} onClick={toggleClass} > <FiXCircle /> </span>
</> : <>
<span className="menubar__button" style={{ display: 'none' }} onClick={toggleClass} > <FiAlignRight /> </span>
</>}
<ul className={boxClass.join(' ')}>
<li className="menu-item" >
<Link to exact activeClassName='is-active' onClick={toggleClass} to={`/`}> Home </Link>
</li>
<li className="menu-item " ><Link onClick={toggleClass} activeClassName='is-active' to={`/contact`}> </Link> </li>
<li onClick={toggleSubmenu} className="menu-item sub__menus__arrows" > <Link to="#"> Sign <FiChevronDown /> </Link>
<ul className={boxClassSubMenu.join(' ')} >
<li> <Link onClick={toggleClass} activeClassName='is-active' to={`signin`}> Přihlásit se </Link> </li>
<li><Link onClick={toggleClass} activeClassName='is-active' to={`signupform`}> Registrovat se </Link> </li>
</ul>
</li>
<li className="menu-item " ><Link onClick={toggleClass} activeClassName='is-active' to={`/Contact`}> Contact </Link> </li>
</ul>
</nav>
</div>
</div>
</div>
</nav>
</header>
I'm creating a movies app with React and Redux, in each movie card I have some information about the movie like the title, image, and a button(buy a ticket). The idea is when I click on the button of each card I want to get the same image and title of the card and display it on the same page on another card that going to pop up so the user can choose the quantity and continue.
How can I get the data from the movie card onclick and transform it to another card as a pop-up?
what do you think
Single movie card Component
const SingleMovieCard = ({ id, title, poster_path, overview, toggleHandler }) => {
const [selected, isSelected] = useState(null);
return (
<article key={id} className="card">
<div key={id} onMouseEnter={() => isSelected(id)} onMouseLeave={() => isSelected(null)}>
<img src={`${ImgPath}` + poster_path} alt={title} className="image" />
{selected === id && <video src="./Trailers/SpaceJam.mp4" autoPlay={true} loop muted />}
</div>
<div className="body-card">
<h1>{title}</h1>
<p>{`${overview.substring(0, 200)}...`}</p>
</div>
<div className="services">
<FiShare2 className="icon" />
<FiHeart className="icon" />
<div className="btn-icon-container">
<BiShoppingBag className="btn-icon" />
<button onClick={() => toggleHandler()}>Buy Ticket</button>
</div>
</div>
</article>
)
}
export default SingleMovieCard;
Pop-up movie card
const PopUpMovie = ({showClass, toggleHandler}) => {
const moviesList = useSelector((state)=> state.allMovies.movies);
return (
<div className={`pop-up-container ${showClass}`}>
<nav className="pop-up">
<GrClose className="pop-up-close" onClick={()=> toggleHandler()}/>
<div className="product-details">
<div className="img-container">
<img src="./Pictures/FreeGuy.jpg" alt="FreeGuy" />
</div>
<div className="product info">
<h1 className="title">Free Guy movie</h1>
<div className="quantity">
<h4>Quantity</h4>
<span>4</span>
</div>
<h5 className="prix">11$</h5>
<button className="btn-checkout">Continue to checkout</button>
</div>
</div>
</nav>}
</div>
)
}
export default PopUpMovie;
you can use Modal from react-bootstrap
Example:
import { Modal } from "react-bootstrap";
const PopUpMovie = ({ showClass, toggleHandler }) => {
const modalContent = (
<div className={`pop-up-container ${showClass}`}>
<nav className="pop-up">
<GrClose className="pop-up-close" onClick={() => toggleHandler()} />
<div className="product-details">
<div className="img-container">
<img src="./Pictures/FreeGuy.jpg" alt="FreeGuy" />
</div>
<div className="product info">
<h1 className="title">Free Guy movie</h1>
<div className="quantity">
<h4>Quantity</h4>
<span>4</span>
</div>
<h5 className="prix">11$</h5>
<button className="btn-checkout">Continue to checkout</button>
</div>
</div>
</nav>
</div>
)
const moviesList = useSelector((state) => state.allMovies.movies);
return (
<Modal
id="order-modal-close"
backdrop="static"
show={showClass}
size={"md"}
dialogClassName="modal-90w"
onHide={toggleHandler}
>
<Modal.Header closeButton>
<Modal.Title>Movie</Modal.Title>
</Modal.Header>
<Modal.Body >{modalContent}</Modal.Body>
{modalFooter}
</Modal>
)
}
I have created two different components, one for a card and one for a modal. What I would like to do now is to connect them together so that when I click the button on the card component, I would like the modal to open up on the screen. I have tried all that I can but can't seem to get it right.
Here is the card compenent:
import img from './112803.jpg';
import GitHub from './github-white.png';
import Website from './website-white.png';
import ModalButton from './ModalButton.js'
function Card(props) {
return (
<div className="card">
<div className="cardBody">
<div className="imageOverlay">
<img className="imageOverlayImg" src={img} alt="landscape" />
<div className="imageOverlayDescription">
<a href={props.gitHub} target="_blank" rel="noopener noreferrer">
<img src={GitHub} alt="GitHub Icon" />
</a>
<a href={props.liveSite} target="_blank" rel="noopener noreferrer">
<img src={Website} alt="liveSite Icon" />
</a>
</div>
</div>
<h2 className="cardTitle">{props.heading}</h2>
<p className="cardDescription">{props.description}</p>
</div>
<button className="cardButton">More Information</button>
</div>
);
}
export default Card;
And here is the modal component:
const Modal =(props)=>{
return(
<>
{props.showModal ? (
<div className="background">
<div className='modalWrapper' showModal={props.showModal}>
<img clasName="modalImg" src={require('./deals.jpg').default} alt="A Landscape" width="100%" height="100%"/>
<div className="modalContent">
<h1>{props.heading}</h1>
<p>{props.description}</p>
<p>{props.madeBy}</p>
<div className="buttonLayout">
<button className="innerModalButton">View Code</button>
<button className="innerModalButton">Live Site</button>
</div>
</div>
<button className="closeModalButton" aria-label="Close modal" onClick={()=>
props.setShowModal(prev => !prev)}>Close</button>
</div>
</div>
) : null}
</>
);
}
And here is some of the logic that the modal needs in order to pop up
const [showModal,setShowModal] = useState(false);
const openModal = () =>{
setShowModal(prev => !prev)
I am still a bit of a beginner and I'm not too sure how to get the project done. Any help would be greatly appreciated. Thank you.
Just add a state in Card pass pass it into Modal:
const [showModal,setShowModal] = useState(false);
...
<Modal
showModal={showModal}
setShowModal={setShowModal}
//...another props to display content
/>
From my understanding of what is going on, it looks like your modal button isn't doing anything. I would suggest you add an onClick method to it.
<button className="cardButton" onClick={()=> setShowModal(true)}> More Information</button>
Also like the answer above, pass the state from the card to the Modal
That could do it.
Let me know if it helped.
getting a url undefined error on the img tag below, most of the links being passed to src work as they are coming from the spotify api, but I guess even some of the sources the spotify api proves are broken, so how do I handle the img tag for broken links as currently I get a 'url is undefined' error
<GridList cellHeight={130} style= {{margin:0}} className="gridList" cols={2}>
{
this.state.fixedArtist.map((artist, index) => (
<GridListTile key={index}>
<a className="rank-song-label" key={index} href={artist.uri} >
<img src={artist.images[0].url} className="rank-album-cover" alt="Album Cover" />
<span className="rank-song_name"> {artist.name}</span>
</div>
</a>
</GridListTile>
))
}
</GridList>
if you want to hide img tag if no image URL is available then you can do below,
<GridList cellHeight={130} style= {{margin:0}} className="gridList" cols={2}>
{
this.state.fixedArtist.map((artist, index) => (
<GridListTile key={index}>
<a className="rank-song-label" key={index} href={artist.uri} >
{artist.images && <img src={artist.images[0].url} className="rank-album-cover" alt="Album Cover" />}
<span className="rank-song_name"> {artist.name}</span>
</div>
</a>
</GridListTile>
))
}
</GridList>
if you want to assign empty src or default url
<GridList cellHeight={130} style= {{margin:0}} className="gridList" cols={2}>
{
this.state.fixedArtist.map((artist, index) => (
<GridListTile key={index}>
<a className="rank-song-label" key={index} href={artist.uri} >
{artist.images && <img src={artist.images.length>0?artist.images[0].url:'image not available url'} className="rank-album-cover" alt="Album Cover" />}
<span className="rank-song_name"> {artist.name}</span>
</div>
</a>
</GridListTile>
))
}
</GridList>
I have a bunch of cards and I would like to have transition with a delay on each item but couldn't really figure it out on how to implement this.
According to the documentation I have to use something like this:
<Transition.Group
as={List}
duration={200}
divided
size='huge'
verticalAlign='middle'
>
{items.map((item) => (
<List.Item key={item}>
<Image avatar src={`/images/avatar/small/${item}.jpg`} />
<List.Content header={_.startCase(item)} />
</List.Item>
))}
</Transition.Group>
but I didn't really get what is as={List} doing there. That's why couldn't really go forward with my solution. Any help will be appreciated.
Here is what I have:
<Card.Group itemsPerRow={itemsPerRow} centered>
{data.map((e) => {
const dateToFormat = e.created_at;
const userIndex = data.indexOf(e);
return (
<Card raised>
<Image
src={readmeFiles[userIndex].image}
wrapped
size="large"
ui={false}
onClick={() => {
const index = data.indexOf(e);
clickHandler(index);
}}
/>
<Card.Content>
<Card.Header></Card.Header>
<Card.Meta>
<span className="date">{e.name}</span>
</Card.Meta>
<Card.Description>{e.description}</Card.Description>
</Card.Content>
<Card.Content extra>
<a>
<Icon name="calendar alternate outline" />
Created: <Moment date={dateToFormat} fromNow />
</a>
</Card.Content>
</Card>
);
})}
The as={List} tells semantic to render this Transition.Group component as a List component, which serves as a parent to the List.Item components. Those will only render correctly if they have a List as parent. You can check the resulting html out here.
The following snippet:
<Transition.Group
as={List}
duration={200}
divided
size='huge'
verticalAlign='middle'
>
{items.map((item) => (
<List.Item key={item}>
<Image avatar src={`/images/avatar/small/${item}.jpg`} />
<List.Content header={_.startCase(item)} />
</List.Item>
))}
</Transition.Group>
Generates the following html:
<div role="list" class="ui huge divided middle aligned list">
<div role="listitem" class="item fade visible transition">
<img src="/images/avatar/small/ade.jpg" class="ui avatar image" />
<div class="content"><div class="header">Ade</div></div>
</div>
<div role="listitem" class="item fade visible transition">
<img src="/images/avatar/small/chris.jpg" class="ui avatar image" />
<div class="content"><div class="header">Chris</div></div>
</div>
<div role="listitem" class="item fade visible transition">
<img src="/images/avatar/small/christian.jpg" class="ui avatar image" />
<div class="content"><div class="header">Christian</div></div>
</div>
</div>
As you can see the first div says role="List" and has the list css class added. In your case the parent would be the Card.Group component.