I couldn't find the 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)}>
Spectacular Mountains
</button>
</div>
<div className='listOfLandscapes__slider__item'>
<SvgRivers />
<button className='listOfLandscapes__slider__item__desc' onClick={() => setRiverVisible(!riverVisible)}>
The Longest Rivers
</button>
</div>
<div className='listOfLandscapes__slider__item'>
<SvgLakes />
<button className='listOfLandscapes__slider__item__desc' onClick={() => setLakeVisible(!lakeVisible)}>
Beautiful Lakes
</button>
</div>
{/* )
} */}
</div>
</div>
</Row>
in the code above everything is hardcoded, but for sure there is a way to make it cleaner. I tried 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: 'Spectacular Mountains',
v: riverVisible,
sv: setRiverVisible
},
{
id: 2,
bcg: <SvgRivers />,
desc: 'The Longest Rivers',
v: mountainVisible,
sv: setMountainVisible
},
{
id: 3,
bcg: <SvgLakes />,
desc: 'Charming Lakes',
v: lakeVisible,
sv: setLakeVisible
}
]
I would be grateful for any leads.
You could create a landscape item component to make it cleaner
export const LandscapeItem = (id, bcg, desc) => {
const [isVisible, setIsVisible] = useState(false);
return ...
}