I am struggling to find a solution on how to pass specific useState states to respective mapped elements.
export const Polska = () => {
const [riverVisible, setRiverVisible] = useState(false)
const [mountainVisible, setMountainVisible] = useState(false)
const [lakeVisible, setLakeVisible] = useState(false)
const [currentSlide, setCurrentSlide] = useState(0)
const handleClick = (direction) => {
direction === 'left'
? setCurrentSlide(currentSlide > 0 ? currentSlide - 1 : 2)
: setCurrentSlide(currentSlide < 3 -1 ? currentSlide + 1 : 0)
}
return (
<div className='polska'>
<Row>
<div className='listOfLandscapes'>
<div className="listOfLandscapes__slider" style={{transform: `translateX(-${currentSlide * 100}vw)` }}>
{/* {
PolskaLandscapes.map((landscape) => */}
<div className='listOfLandscapes__slider__item'>
<SvgMountains />
<button className='listOfLandscapes__slider__item__desc' onClick={() => setMountainVisible(!mountainVisible)}>
Breathtaking Mountains
</button>
</div>
<div className='listOfLandscapes__slider__item'>
<SvgRivers />
<button className='listOfLandscapes__slider__item__desc' onClick={() => setRiverVisible(!riverVisible)}>
The Majestic Rivers
</button>
</div>
<div className='listOfLandscapes__slider__item'>
<SvgLakes />
<button className='listOfLandscapes__slider__item__desc' onClick={() => setLakeVisible(!lakeVisible)}>
Enchanting Lakes
</button>
</div>
{/* )
} */}
</div>
</div>
</Row>
In the code above, everything is hardcoded. However, I believe there must be a way to make it cleaner. I attempted to pass it in the object properties, but it didn't work...
import SvgMountains from "./svgPolska/SvgMountains"
import SvgRivers from "./svgPolska/SvgRivers"
import SvgLakes from "./svgPolska/SvgLakes"
export const PolskaLandscapes = [
{
id: 1,
bcg: <SvgMountains />,
desc: 'Breathtaking Mountains',
v: riverVisible,
sv: setRiverVisible
},
{
id: 2,
bcg: <SvgRivers />,
desc: 'The Majestic Rivers',
v: mountainVisible,
sv: setMountainVisible
},
{
id: 3,
bcg: <SvgLakes />,
desc: 'Enchanting Lakes',
v: lakeVisible,
sv: setLakeVisible
}
]
I would greatly appreciate any insights.