Смена контента useStae?

Question

[Atay Kalykov]

Приветствую многоуважаемые кодеры
Передо мною стоит задача менять картинку используя 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> 
    )
}

Comments

[Кира]

а что такое setScheme === 'field1'? вы сравниваете функцию из хука и строку?

[WbICHA]

Кира, да там ещё и строкой выше прекрасное сравнение, которое абсолютно всегда будет ложным.
item.scheme === image