I am very new in React. I have multiple Swiper Thumb caroucels in one page.
also I have two filtered elements in my code which I want to show on display.my first carousel works perfectly in at first filtered item, but second one's navigation does not work, when I click, nothing happens.
const [thumbsSwiper, setThumbsSwiper] = useState(null);
const [thumbsSwiper1, setThumbsSwiper1] =useState(null)
this one works perfectly
<Swiper
style={{
"--swiper-navigation-color": "#fff",
"--swiper-pagination-color": "#fff",
}}
spaceBetween={10}
navigation={false}
thumbs={{ swiper: thumbsSwiper }}
modules={[FreeMode, Navigation, Thumbs]}
className="mySwiper2"
>
{movie.images.map((item,index)=>{
return (
<SwiperSlide key={index} >
<img src={`http://.../${item}`} />
</SwiperSlide>
)
})}
</Swiper>
<Swiper
onSwiper={setThumbsSwiper}
spaceBetween={10}
slidesPerView={movie.images.length}
freeMode={true}
simulateTouch = {true}
watchSlidesProgress={true}
modules={[FreeMode, Navigation, Thumbs]}
className="mySwiper"
>
{movie.images.map((item,index)=>{
return (
<SwiperSlide key={index} >
<img src={`http://.../${item}`} />
</SwiperSlide>
)
})}
</Swiper>
this one does not work, it is multiple array inside it and maybe this is a reason
<Swiper
style={{
"--swiper-navigation-color": "#fff",
"--swiper-pagination-color": "#fff",
}}
spaceBetween={10}
navigation={false}
thumbs={{ swiper: thumbsSwiper1 }}
modules={[FreeMode, Navigation, Thumbs]}
className="mySwiper2"
>
{item.images.map((item,index)=>{
return (
<SwiperSlide key={index} >
<img src={`http://apicity.cgroup.ge/${item}`} />
</SwiperSlide>
)
})}
</Swiper>
<Swiper
onSwiper={setThumbsSwiper1}
spaceBetween={10}
slidesPerView={item.images.length}
freeMode={true}
watchSlidesProgress={true}
modules={[FreeMode, Navigation, Thumbs]}
className="mySwiper"
>
{item.images.map((item,index)=>{
return (
<SwiperSlide key={index}>
<img src={`http://apicity.cgroup.ge/${item}`}/>
</SwiperSlide>
)
})}
</Swiper>
I thought I should change classes but it still does not worked, then I tried to change some property but still same result. help please
Related
I have these tabs that have a close button on them, if the content in them has edits then the close icon turns to a circle, similar to visual code.
{tabs.map((tab, index) => {
const child = (
<StyledTab
label={
<span>
{tab.label + ':' + tab.hasEdit}
<IconButton size="small" component="span" onClick={() => closeClickHandler(tab.value)}>
{tab.hasEdit ? (
<CircleIcon style={{ fontSize: "12px" }} />
) : (
<CloseIcon style={{ fontSize: "18px" }} />
)}
</IconButton>
</span>
}
value={tab.value}
key={index}
/>
);
return (
<DraggableTab
label={
<span>
{tab.label}
<IconButton size="small" component="span" onClick={() => {
closeClickHandler(tab.value);
}}>
{tab.hasEdit ? (
<CircleIcon style={{ fontSize: "12px" }} />
) : (
<CloseIcon style={{ fontSize: "18px" }} />
)}
</IconButton>
</span>
}
value={tab.value}
index={index}
key={index}
child={child}
/>
);
})}
What I'm having trouble with is getting the icon to change from a circle to a close icon while hovering over the button.
Could someone give me a hand on a good way to implement this please?!
You could do this by adding a state for the items. Then add a onMouseEnter and onMouseLeave events on the IconButton. When hovering we can add the index to the array and finally remove when we're leaving. To determine if a icon needs to change we can check if the index in in the hoveringItems.
const [hoveringItems, setHoveringItems] = useState([]);
function handleHover(index, isLeaving) {
setHoveringItems((prevItems) => {
if (isLeaving) return prevItems.filter((item) => item !== index);
return [...prevItems, index];
});
}
return (
<IconButton
size="small"
component="span"
onClick={() => {
closeClickHandler(tab.value);
}}
onMouseEnter={() => handleHover(index, false)}
onMouseLeave={() => handleHover(index, true)}
>
{tab.hasEdit || hoveringItems.includes(index) ? (
<CircleIcon style={{ fontSize: "12px" }} />
) : (
<CloseIcon style={{ fontSize: "18px" }} />
)}
</IconButton>
);
hy, Im using swiper.js library in react js I have spacebetween value is 100, now for breakpoint 600 I want spacebetween 30, how is it possible,
how can I use breakpoints
type here
<Swiper
effect={"coverflow"}
grabCursor={true}
centeredSlides={true}
slidesPerView={3}
loop={true}
pagination={false}
modules={[EffectCoverflow, Pagination]}
className="mySwiper d-"
initialSlide={2}
spaceBetween={100}
autoplay={true}
coverflowEffect={{
rotate: 0,
stretch: 5,
depth: 24,
modifier: 20,
slideShadows: false,
}}
>
<SwiperSlide>
<div className="d-flex justify-content-center">
1
<img src="\assets\images\feature\feature1.png" alt="" />
</div>
</SwiperSlide>
<SwiperSlide>
<div className="d-flex justify-content-center">
2
<img src="\assets\images\feature\feature2.png" alt="" />
</div>
</SwiperSlide>
<SwiperSlide>
<div className="d-flex justify-content-center">
3
<img src="\assets\images\feature\feature3.png" alt="" />
</div>
</SwiperSlide>
</Swiper>
You have to set breakpoints in your jsx/tsx file.
<Swiper
{...props}
breakpoints={{
// when window width is >= 600px
600: {
spaceBetween: 20,
},
}}
>
{slides}
</Swiper>
For some reason, in the first "reordering" framer-motion miscalculates my items' position. It definitely has something to do with the fact that I'm using this within a side panel because it is positioning them to a distance in the x-axis precisely the same as the width of my panel. Another problem I'm having is that the AnimatePrescese applies the height animation to the element itself, but not to the children... Any suggestions?
<Reorder.Group
axis="y"
className="flex flex-col p-0 m-0 list-none relative"
values={orderedItems}
onReorder={setOrderedItems}
ref={listRef}
>
<AnimatePresence>
{orderedItems?.map(item => {
const {
id,
referencePayload: { abbreviation, description, title, url }
} = item
return (
<Reorder.Item
key={id}
value={item}
dragConstraints={listRef}
dragElastic={0.1}
dragMomentum={false}
onDragStart={() => onDragStart(id)}
onDragEnd={() => onDragEnd(id)}
initial={{ height: 0 }}
animate={{ height: 'auto' }}
exit={{ height: 0 }}
>
<ProductItem
id={id}
url={url}
abbreviation={abbreviation}
title={title}
description={description}
onRemoveItem={handleRemoveFavourite}
hasUpdateError={isRemovalError}
isDragging={activeItemId === id}
/>
</Reorder.Item>
)
})}
</AnimatePresence>
</Reorder.Group>
Video with example => https://www.loom.com/share/cb2bf5f334f446459eeb1fc16772a3e4
novice developer here.
I can't seem to solve this missing key error. I've used the key prop for each time i've mapped but I can't seem to find the child with the missing key. please help!
I've tried putting key props in some of the child divs but still no success.
<h2 className="head-text">Skills & Experience</h2>
<div className="app__skills-container">
<motion.div className="app__skills-list">
{skills.map((skill) => (
<motion.div
whileInView={{ opacity: [0, 1] }}
transition={{ duration: 0.5 }}
className="app__skills-item app__flex"
key={skill.name}
>
<div
className="app__flex"
style={{ backgroundColor: skill.bgColor }}
>
<img src={urlFor(skill.icon)} alt={skill.name}/>
</div>
<p className="p-text">{skill.name}</p>
</motion.div>
))}
</motion.div>
<motion.div className="app__skills-exp">
{experience.map((experience) => (
<motion.div className="app__skills-exp-item" key={experience.year}>
<div className="app__skills-exp-year">
<p className="bold-text">{experience.year}</p>
</div>
<motion.div className="app__skills-exp-works">
{experience.works.map((work) => (
<>
<motion.div
whileInView={{ opacity: [0, 1] }}
transition={{ duration: 0.5 }}
className="app__skills-exp-work"
data-tip
data-for={work.name}
key={work.name}
>
<h4 className="bold-text">{work.name}</h4>
<p className="p-text">{work.company}</p>
</motion.div>
<ReactTooltip
id={work.name}
effect="solid"
arrowColor="#fff"
className="skills-tooltip"
>
{work.desc}
</ReactTooltip>
</>
))}
</motion.div>
</motion.div>
))}
</motion.div>
</div>
</>
);
};
export default AppWrap(
MotionWrap(Skills, 'app__skills'),
'skills', "app__whitebg"
);
Error is with <>...</> items in your
{experience.works.map((work) => (
<>
<motion.div key={work.name}>
{/* ... */}
</motion.div>
</>
))}
They are top-level DOM nodes inside of your map function, so they should have the key, not the child motion.div.
But they cant have key, so you will need to use Fragments. They are just the same.
import {Fragment} from "react";
{experience.works.map((work) => (
<Fragment key={work.name}>
<motion.div
whileInView={{ opacity: [0, 1] }}
transition={{ duration: 0.5 }}
className="app__skills-exp-work"
data-tip
data-for={work.name}
>
<h4 className="bold-text">{work.name}</h4>
<p className="p-text">{work.company}</p>
</motion.div>
<ReactTooltip
id={work.name}
effect="solid"
arrowColor="#fff"
className="skills-tooltip"
>
{work.desc}
</ReactTooltip>
</Fragment>
))}
According to react docs, the key has to be
a string that uniquely identifies a list item among its siblings
It is possible that the key you have provided for each element is not unique. For eg key={skill.name} key={experience.year} will not work if there are two list items with the same name or year respectively.
What you can do is use any uniquely identifiable property of the list item or the index of the array.
{skills.map((skill, index) => (
<motion.div
whileInView={{ opacity: [0, 1] }}
transition={{ duration: 0.5 }}
className="app__skills-item app__flex"
key={index}
>
<div
className="app__flex"
style={{ backgroundColor: skill.bgColor }}
>
<img src={urlFor(skill.icon)} alt={skill.name}/>
</div>
<p className="p-text">{skill.name}</p>
</motion.div>
))}
Apparently this warning point to this (specifically in the key of skill):
{skills.map((skill) => (
<motion.div
whileInView={{ opacity: [0, 1] }}
transition={{ duration: 0.5 }}
className="app__skills-item app__flex"
key={skill.name}
>
<div
className="app__flex"
style={{ backgroundColor: skill.bgColor }}
>
<img />
<p>{skill.name}</p>
))}
{experiences.map((experience) => (
<motion.div
className="app__skills-exp-item"
key={experience.year}
>
<p>{experience.year}</p>
{experience.works.map((work) => (
<>
<motion.div
whileInView={{ opacity: [0, 1] }}
transition={{ duration: 0.5 }}
className="app__skills-exp-work"
data-tip
data-for={work.name}
key={work.name}
>
<h4>{work.name}</h4>
<p>{work.company}</p>
<ReactTooltip
id={work.name}
effect="solid"
arrowColor="#fff"
className="skills-tooltip"
>
{work.desc}
</>
))}
))}
I tried writing skills.name instead of skill.name and writing skill.id instead of skill.name also tried the same with work.name but i think that the issue is in skill and not in work.
You need to put the key in the fragment for the second map. Which means you will need to import { Fragment } from "react" and use it (I am talking on the experience.works.map line)
The general rule of thumb is if you are mapping [components] in React, you need a key.
You sadly cannot use the shorthand for Fragments <></> with keys currently however, hence the need to import it.
import { Fragment } from "react"
...
{experience.works.map((work,index) => (
<Fragment key={index}>
<motion.div
whileInView={{ opacity: [0, 1] }}
transition={{ duration: 0.5 }}
className="app__skills-exp-work"
data-tip
data-for={work.name}
key={work.name}
>
<h4>{work.name}</h4>
<p>{work.company}</p>
<ReactTooltip
id={work.name}
effect="solid"
arrowColor="#fff"
className="skills-tooltip"
>
{work.desc}
</>
))}