Приветствую многоуважаемые кодеры
Передо мною стоит задача менять картинку используя useState
Итак есть массив в нем две картинки, по умолчанию должна выводиться первая картинка, после клика по кнопке "след" должна меняться картинка. В моем же случае картинка вообще не отображается видимо где то не правильно передал данные а ошибку не могу найти плс ХЕЛП!!
console.log выводит массив
import React, { useState } from 'react'
import styles from './styles.module.scss'
import { Link } from 'react-router-dom'
import classNames from 'classnames'
import DjalKokildak from '../../../../assets/images/DjalKokildak.png'
import Turpachaty from '../../../../assets/images/Turpachaty.png'
import nextArrow from '../../../../assets/icons/nextArrow.svg'
import prevArrow from '../../../../assets/icons/prevArrow.svg'
const Fields = ({image}) => {
const [scheme, setScheme] = useState('field1')
const data = [
{
scheme : {
field1 : DjalKokildak,
field2 : Turpachaty
}
}
]
console.log(data)
return (
<div className={styles.container}>
<div className={styles.wrapper}>
<div className={styles.line} />
<div className={styles.contentBlock}>
<div className={styles.titleBlock}>
<h1 className={styles.title}>месторождения</h1>
<p className={styles.text}>“Джал-Кокильдак” и “Турпачаты”</p>
<Link to='/' className={styles.link}>подробнее</Link>
</div>
<div className={styles.actionBlock}>
<div className={styles.switcher}>
<button
className={classNames(styles.button, {
[styles.activeButton]: scheme === 'field1'
})}
onClick={() => setScheme('field1')}
>
след
</button>
<img src={nextArrow} alt="" />
</div>
{data.map(item => item.scheme === image && (
<img src={item.scheme[setScheme === 'field1']}></img>
))}
<div className={styles.switcher}>
<button
className={classNames(styles.button, {
[styles.activeButton]: scheme === 'field2'
})}
onClick={() => setScheme('Turpachaty')}
>
пред
</button>
<img src={prevArrow} alt="" />
</div>
</div>
</div>
</div>
</div>
)
}
