I'm making a Netflix clone site. I want the trailers of the movies to play when the mouse is hovered over the movie posters. I did this for the big trailer section at the top. But when you hover over any of the posters arranged side by side at the bottom, all the movies in that series play the same trailer instead of a single movie. The reason is because I made that array with the map method. How can I do this like on Netflix? Code and pictures are below.
this row
{movies.map((movie) => (
<>
{trailerUrl && (
<div className="trailer-content">
<Youtube
className="trailer"
videoId={trailerUrl}
opts={opts}
/>
</div>
)}
{!trailerUrl && (
<div key={movie.id} className="all-hover">
{
<img
onMouseLeave={() => setTrailerUrl("")}
onMouseEnter={() => handleEnter(movie)}
className={`row-poster ${
isLargeRow && "row-poster-large"
}`}
src={`${photo_base_URL}${
isLargeRow ? movie.poster_path : movie.backdrop_path
}`}
alt={movie.name}
/>
}......
this picture
issue
Related
The idea is: I have 10 buttons, when I click on one button the recognition starts and the color of this button changes, when the recognition stops the button's color changes back to its initial.
But the problem is, when I click on the button, all buttons change its color and when the recognition stops, all 10 buttons change its color back to the initial one.
I keep the state of recognition (true/false) in useState: const [listening, setListening] = useState(false).
Then I map via array of buttons and check if recognition is listening - true otherwise - false:
<button
onClick={() => {
startRec(phrases.transcript)
}}
>
{!listening ? (
<img src="/recognize_phrase.png" width={40} height={40} />
) : (
<img src="/recognize_phrase_active.png" width={40} height={40} />
)}
</button>
You can take another state that stores the index (taken during the mapping array) of the button clicked, so if the id of a button matches with the state it changes its appearance.
<button
onClick={() => {
setId(id);
startRec(phrases.transcript)
}}
>
{(!listening && (idx != id)) ? (
<img src="/recognize_phrase.png" width={40} height={40} />
) : (
<img src="/recognize_phrase_active.png" width={40} height={40} />
)}
</button>
This ensures that the appearance of the button clicked is only changed.
Hi im currently running an e-commerce site where i need to open the cart (popover component) manually whenever a person adds something to their cart.
This is the code i have at the moment, but it's not finished. Im using Headless UI from Tailwind.
export default function Cart() {
const {isCartOpen, openCart, closeCart} = useCartUI();
const {lines, totalQuantity} = useCart();
return (
<Popover className="ml-4 flow-root text-sm lg:relative lg:ml-8">
{({open}: {open: boolean}) => {
if(!open) closeCart();
return (
<>
<Popover.Button
className={clsx(
'flex h-[2.4rem] items-center rounded-sm bg-darkGray px-3 py-2 text-sm font-bold duration-150',
open ? "bg-opacity-20" : "bg-opacity-0 hover:bg-opacity-10",
)}
>
<span className="mr-2">Kurv</span>
<ChevronDownIcon className={clsx(open && 'rotate-180')} />
</Popover.Button>
{isCartOpen && (
<Popover.Panel static className="absolute inset-x-0 top-16 mt-px bg-white pb-6 shadow-lg sm:px-2 lg:top-full lg:left-auto lg:right-0 lg:mt-3 lg:-mr-1.5 lg:w-80 lg:rounded-lg lg:ring-1 lg:ring-black lg:ring-opacity-5">
<CartHeader numLines={lines.length} />
{totalQuantity === 0 ? (
<CartEmpty />
) : (
<>
<CartItems />
<CartFooter />
</>
)}
</Popover.Panel>
)}
</>
)
}}
</Popover>
);
}
I was just looking for a similar answer. If you haven't solved it, and are still interested, I found a solution.
You can use the static prop on the popover to always display it and use your own state, or the popover's internal state, to conditionally display its contents.
Here's an example https://codesandbox.io/s/d8llw?file=/src/App.js:600-609. You can find information on the static prop here: https://headlessui.com/react/popover#showing-hiding-the-popover
I have built a website fully with the swiperJs in react.js web app and when i am using it on the mobile i need to slice the slides in 3 parts and slide them vertically and the collection of images should be in the horizontal stacked slides, and i need to update the url when i am on the sliced slides each has the different url and should redirect to the exact slides in the page, i am passing the images through the data.jsx file.
return (
<>
{item.map(
({ id, title, description, collection_images }, idx) => (
<div key={`${idx}`}>
<TitleSlide
title={t(title)}
description={t(description)}
/>
<Swiper {...swiperProps} spaceBetween={0} ref={swiperRef}>
{collection_images.length > 0 &&
collection_images.map(({ id, url, alt }, idx) => (
<SwiperSlide key={`${id}`}>
<figure>
<img
src={url}
alt={alt}
className="img-fluid"
/>
</figure>
</SwiperSlide>
))}
</Swiper>
</div>
),
)}
</>
);
I am using AntD Collapse for displaying a list of items after expand icon is clicked.
I want the position of expandIcon to go to bottom-right after all the list of the data when expand icon is clicked (just like in google news), but found only two options (left|right) for 'expandIconPosition', no option for top or bottom.
How can we align the expandIcon to bottom-right, when expand icon is clicked?
Few lines from the code for reference:
<Collapse
ghost
style={{ marginTop: "-1vh" }}
expandIcon={({ isActive }) => (
<DownOutlined
style={{ marginTop: "-2vh" }}
rotate={isActive ? 180 : 0}
/>
)}
expandIconPosition="right"
>
<Panel>
<div>
{list()} //list of items
</div>
</Panel>
</Collapse>
Here's one possible solution. Make Collapse a controlled component by specifying activeKey prop and then the value of it will be based on state. Then, by tracking the activeKeys state you can now do a conditional rendering (hide and show) on icons:
const [activePanelKeys, setActivePanelKeys] = useState([]);
const handlePanelIconClick = (panelKey, makeActive) => {
if (makeActive) {
setActivePanelKeys([...activePanelKeys, panelKey]);
} else {
setActivePanelKeys(activePanelKeys.filter((aPK) => aPK !== panelKey));
}
};
<Collapse
activeKey={activePanelKeys}
expandIconPosition="right"
expandIcon={() => <DownOutlined />}
// expandIcon={(panelProps) => (
// <DownOutlined
// onClick={() => handlePanelIconClick(panelProps.panelKey, true)}
// />
// )}
onChange={e => setActivePanelKeys(e)} //if you want to click only icon, comment this and uncomment the above expandedIcon
>
<Panel
header="This is panel header 1"
key="p1"
showArrow={activePanelKeys.indexOf("p1") === -1}
>
<div>{text}</div>
{activePanelKeys.indexOf("p1") !== -1 && (
<div style={{ textAlign: "right", marginTop: 10 }}>
<UpOutlined onClick={() => handlePanelIconClick("p1", false)} />
</div>
)}
</Panel>
{/* <PanelContent header="This is panel header 2" key="p2">
{text}
</PanelContent> */}
</Collapse>;
Here is the complete sample code:
Note: I tried to make a reusable Panel component but it seems that the reveal animation were gone. You can uncomment the commented PanelContent on the code to see the difference.
Hope that I hit what you want.
I´m rendering an array, every element of the array is showed with component "Post", but the elements are in the same line, I tried with
return (
<div style={{ height: 'calc(100vh - 65px)' }} className="d-flex justify-content-center align-items-center">
{posts.map((post) => {
return <Post key={post._id} post={post} />
})}
</div>
);
The component "Post" is the next:
I´m using Boostrap por the css styles
return (
{usuario.nombre}
Special title treatment
{texto}
Go somewhere
2 days ago
);
My result (All the elements are in horizontal position and I need them in vertical position):
The father component is root.
If I delete the css classes of the component "Post", teh problem remains.
Have you tried this.
return (
<div>
{posts.map((post) => {
return <><Post key={post._id} post={post} /><br /></>
})}
</div>
);
I only changed the class of div where I put the .map ;| adn the problem was solved.
className="container" instead className="d-flex justify-content-center align-items-center">