useState is not a function в map
У меня есть дочерний элемент, к которому я передаю setId, прохожусь по всем данным с помощью map. Пытаюсь с помощью onClick сделать setId, но мне пишет setId is not a function. Как быть?
import { useTranslation } from 'react-i18next'
import styles from './styles.module.scss'
import { Button, ButtonTheme } from 'shared/ui/Button/Button'
import { useEffect, useState } from 'react'
import { useGetAllDepositsQuery } from 'entities/api/allDeposits'
import { useAppDispatch } from 'shared/lib/hooks/useAppDispatch'
import { useSelector } from 'react-redux'
import { getUserDeposits } from 'entities/User/model/selectors/getUserDeposits/getUserDeposits'
export const FondBot = ({ onOpen, small, all, onClose, setId, }: { onOpen?: any, small?: boolean, all?: boolean, onClose?: any, setId?: any }) => {
const { t } = useTranslation()
const { data } = useGetAllDepositsQuery(null)
interface TDeposit {
id: string,
min_days: number,
max_days: number,
description: string,
profitability: number,
min_amount: number,
title: string
}
const [deposit, setDeposit] = useState<TDeposit | undefined>()
const [deposits, setDeposits] = useState<TDeposit[] | undefined>()
const item = {
id: 1,
type: 'contributions.type',
conditions: 'contributions.conditions',
waiting: '4%',
timeEnd: '$10 000',
sum: '6 месяцев'
}
useEffect(() => {
if (data) {
if (all) {
setDeposits(data)
} else {
setDeposit(data ? data[0] : undefined);
}
}
}, [data])
return (
<div className={styles.content}>
{
!all ?
deposit &&
<div className={styles.block} key={deposit.id}>
<div className={styles.top}>
<h2 className={styles.title}>{deposit.title}</h2>
<p className={styles.type}>{t(item.type)}</p>
<p className={styles.conditions}>{t(item.conditions)}
</p>
</div>
<div className={styles.main}>
<div className={styles.item}>
<p className={styles.itemTitle}>{t('FondBot.waiting')}</p>
<p className={styles.value}>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M16.19 2H7.81C4.17 2 2 4.17 2 7.81V16.18C2 19.83 4.17 22 7.81 22H16.18C19.82 22 21.99 19.83 21.99 16.19V7.81C22 4.17 19.83 2 16.19 2ZM7.75 9.14C7.75 8.33 8.41 7.66 9.23 7.66C10.04 7.66 10.71 8.32 10.71 9.14C10.71 9.95 10.05 10.62 9.23 10.62C8.41 10.61 7.75 9.95 7.75 9.14ZM8.82 16.02C8.63 16.02 8.44 15.95 8.29 15.8C8 15.51 8 15.04 8.29 14.74L14.84 8.19C15.13 7.9 15.61 7.9 15.9 8.19C16.19 8.48 16.19 8.96 15.9 9.25L9.35 15.8C9.2 15.95 9.01 16.02 8.82 16.02ZM15.77 16.34C14.96 16.34 14.29 15.68 14.29 14.86C14.29 14.05 14.95 13.38 15.77 13.38C16.58 13.38 17.25 14.04 17.25 14.86C17.25 15.68 16.59 16.34 15.77 16.34Z" fill="#252728" />
</svg>
{Math.round(deposit.profitability)}%
</p>
</div>
<div className={styles.item}>
<p className={styles.itemTitle}>{t('FondBot.timeEnd')}</p>
<p className={styles.value}>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M11.2499 8.07999V10.94L10.2399 10.59C9.72992 10.41 9.41992 10.24 9.41992 9.36999C9.41992 8.65999 9.94992 8.07999 10.5999 8.07999H11.2499Z" fill="#252728" />
<path d="M14.58 14.63C14.58 15.34 14.05 15.92 13.4 15.92H12.75V13.06L13.76 13.41C14.27 13.59 14.58 13.76 14.58 14.63Z" fill="#252728" />
<path d="M16.19 2H7.81C4.17 2 2 4.17 2 7.81V16.19C2 19.83 4.17 22 7.81 22H16.19C19.83 22 22 19.83 22 16.19V7.81C22 4.17 19.83 2 16.19 2ZM14.26 12C15.04 12.27 16.08 12.84 16.08 14.63C16.08 16.17 14.88 17.42 13.4 17.42H12.75V18C12.75 18.41 12.41 18.75 12 18.75C11.59 18.75 11.25 18.41 11.25 18V17.42H10.89C9.25 17.42 7.92 16.03 7.92 14.33C7.92 13.92 8.25 13.58 8.67 13.58C9.08 13.58 9.42 13.92 9.42 14.33C9.42 15.21 10.08 15.92 10.89 15.92H11.25V12.53L9.74 12C8.96 11.73 7.92 11.16 7.92 9.37C7.92 7.83 9.12 6.58 10.6 6.58H11.25V6C11.25 5.59 11.59 5.25 12 5.25C12.41 5.25 12.75 5.59 12.75 6V6.58H13.11C14.75 6.58 16.08 7.97 16.08 9.67C16.08 10.08 15.75 10.42 15.33 10.42C14.92 10.42 14.58 10.08 14.58 9.67C14.58 8.79 13.92 8.08 13.11 8.08H12.75V11.47L14.26 12Z" fill="#252728" />
</svg>
{Math.round(deposit.min_amount)}%
</p>
</div>
<div className={styles.item}>
<p className={styles.itemTitle}>{t('FondBot.sum')}</p>
<p className={styles.value}>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M16.75 3.56V2C16.75 1.59 16.41 1.25 16 1.25C15.59 1.25 15.25 1.59 15.25 2V3.5H8.74999V2C8.74999 1.59 8.40999 1.25 7.99999 1.25C7.58999 1.25 7.24999 1.59 7.24999 2V3.56C4.54999 3.81 3.23999 5.42 3.03999 7.81C3.01999 8.1 3.25999 8.34 3.53999 8.34H20.46C20.75 8.34 20.99 8.09 20.96 7.81C20.76 5.42 19.45 3.81 16.75 3.56Z" fill="#252728" />
<path d="M20 9.84H4C3.45 9.84 3 10.29 3 10.84V17C3 20 4.5 22 8 22H16C19.5 22 21 20 21 17V10.84C21 10.29 20.55 9.84 20 9.84ZM9.21 18.21C9.16 18.25 9.11 18.3 9.06 18.33C9 18.37 8.94 18.4 8.88 18.42C8.82 18.45 8.76 18.47 8.7 18.48C8.63 18.49 8.57 18.5 8.5 18.5C8.37 18.5 8.24 18.47 8.12 18.42C7.99 18.37 7.89 18.3 7.79 18.21C7.61 18.02 7.5 17.76 7.5 17.5C7.5 17.24 7.61 16.98 7.79 16.79C7.89 16.7 7.99 16.63 8.12 16.58C8.3 16.5 8.5 16.48 8.7 16.52C8.76 16.53 8.82 16.55 8.88 16.58C8.94 16.6 9 16.63 9.06 16.67C9.11 16.71 9.16 16.75 9.21 16.79C9.39 16.98 9.5 17.24 9.5 17.5C9.5 17.76 9.39 18.02 9.21 18.21ZM9.21 14.71C9.02 14.89 8.76 15 8.5 15C8.24 15 7.98 14.89 7.79 14.71C7.61 14.52 7.5 14.26 7.5 14C7.5 13.74 7.61 13.48 7.79 13.29C8.07 13.01 8.51 12.92 8.88 13.08C9.01 13.13 9.12 13.2 9.21 13.29C9.39 13.48 9.5 13.74 9.5 14C9.5 14.26 9.39 14.52 9.21 14.71ZM12.71 18.21C12.52 18.39 12.26 18.5 12 18.5C11.74 18.5 11.48 18.39 11.29 18.21C11.11 18.02 11 17.76 11 17.5C11 17.24 11.11 16.98 11.29 16.79C11.66 16.42 12.34 16.42 12.71 16.79C12.89 16.98 13 17.24 13 17.5C13 17.76 12.89 18.02 12.71 18.21ZM12.71 14.71C12.66 14.75 12.61 14.79 12.56 14.83C12.5 14.87 12.44 14.9 12.38 14.92C12.32 14.95 12.26 14.97 12.2 14.98C12.13 14.99 12.07 15 12 15C11.74 15 11.48 14.89 11.29 14.71C11.11 14.52 11 14.26 11 14C11 13.74 11.11 13.48 11.29 13.29C11.38 13.2 11.49 13.13 11.62 13.08C11.99 12.92 12.43 13.01 12.71 13.29C12.89 13.48 13 13.74 13 14C13 14.26 12.89 14.52 12.71 14.71ZM16.21 18.21C16.02 18.39 15.76 18.5 15.5 18.5C15.24 18.5 14.98 18.39 14.79 18.21C14.61 18.02 14.5 17.76 14.5 17.5C14.5 17.24 14.61 16.98 14.79 16.79C15.16 16.42 15.84 16.42 16.21 16.79C16.39 16.98 16.5 17.24 16.5 17.5C16.5 17.76 16.39 18.02 16.21 18.21ZM16.21 14.71C16.16 14.75 16.11 14.79 16.06 14.83C16 14.87 15.94 14.9 15.88 14.92C15.82 14.95 15.76 14.97 15.7 14.98C15.63 14.99 15.56 15 15.5 15C15.24 15 14.98 14.89 14.79 14.71C14.61 14.52 14.5 14.26 14.5 14C14.5 13.74 14.61 13.48 14.79 13.29C14.89 13.2 14.99 13.13 15.12 13.08C15.3 13 15.5 12.98 15.7 13.02C15.76 13.03 15.82 13.05 15.88 13.08C15.94 13.1 16 13.13 16.06 13.17C16.11 13.21 16.16 13.25 16.21 13.29C16.39 13.48 16.5 13.74 16.5 14C16.5 14.26 16.39 14.52 16.21 14.71Z" fill="#252728" />
</svg>
{deposit.min_days} дней
</p>
</div>
</div>
<Button
theme={ButtonTheme.YELLOW}
align={'center'}
gap={10}
endIcon={undefined}
className={`${styles.button} ${styles.first}`}
onClick={() => {
setId(deposit.id)
}}
>
<span>{t('FondBot.button.first')}</span>
</Button>
{
!small &&
<Button
theme={ButtonTheme.TRANSPARENT_BORDERED}
align={'center'}
gap={10}
endIcon={undefined}
className={styles.button}
onClick={onOpen}
>
<span>{t('FondBot.button.second')}</span>
</Button>
}
</div> :
deposits?.map(deposit => {
return (
<div className={styles.block} key={deposit.id}>
<div className={styles.top}>
<h2 className={styles.title}>{deposit.title}</h2>
<p className={styles.type}>{t(item.type)}</p>
<p className={styles.conditions}>{t(item.conditions)}</p>
</div>
<div className={styles.main}>
<div className={styles.item}>
<p className={styles.itemTitle}>{t('FondBot.waiting')}</p>
<p className={styles.value}>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M16.19 2H7.81C4.17 2 2 4.17 2 7.81V16.18C2 19.83 4.17 22 7.81 22H16.18C19.82 22 21.99 19.83 21.99 16.19V7.81C22 4.17 19.83 2 16.19 2ZM7.75 9.14C7.75 8.33 8.41 7.66 9.23 7.66C10.04 7.66 10.71 8.32 10.71 9.14C10.71 9.95 10.05 10.62 9.23 10.62C8.41 10.61 7.75 9.95 7.75 9.14ZM8.82 16.02C8.63 16.02 8.44 15.95 8.29 15.8C8 15.51 8 15.04 8.29 14.74L14.84 8.19C15.13 7.9 15.61 7.9 15.9 8.19C16.19 8.48 16.19 8.96 15.9 9.25L9.35 15.8C9.2 15.95 9.01 16.02 8.82 16.02ZM15.77 16.34C14.96 16.34 14.29 15.68 14.29 14.86C14.29 14.05 14.95 13.38 15.77 13.38C16.58 13.38 17.25 14.04 17.25 14.86C17.25 15.68 16.59 16.34 15.77 16.34Z" fill="#252728" />
</svg>
{Math.round(deposit.profitability)}%
</p>
</div>
<div className={styles.item}>
<p className={styles.itemTitle}>{t('FondBot.timeEnd')}</p>
<p className={styles.value}>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M11.2499 8.07999V10.94L10.2399 10.59C9.72992 10.41 9.41992 10.24 9.41992 9.36999C9.41992 8.65999 9.94992 8.07999 10.5999 8.07999H11.2499Z" fill="#252728" />
<path d="M14.58 14.63C14.58 15.34 14.05 15.92 13.4 15.92H12.75V13.06L13.76 13.41C14.27 13.59 14.58 13.76 14.58 14.63Z" fill="#252728" />
<path d="M16.19 2H7.81C4.17 2 2 4.17 2 7.81V16.19C2 19.83 4.17 22 7.81 22H16.19C19.83 22 22 19.83 22 16.19V7.81C22 4.17 19.83 2 16.19 2ZM14.26 12C15.04 12.27 16.08 12.84 16.08 14.63C16.08 16.17 14.88 17.42 13.4 17.42H12.75V18C12.75 18.41 12.41 18.75 12 18.75C11.59 18.75 11.25 18.41 11.25 18V17.42H10.89C9.25 17.42 7.92 16.03 7.92 14.33C7.92 13.92 8.25 13.58 8.67 13.58C9.08 13.58 9.42 13.92 9.42 14.33C9.42 15.21 10.08 15.92 10.89 15.92H11.25V12.53L9.74 12C8.96 11.73 7.92 11.16 7.92 9.37C7.92 7.83 9.12 6.58 10.6 6.58H11.25V6C11.25 5.59 11.59 5.25 12 5.25C12.41 5.25 12.75 5.59 12.75 6V6.58H13.11C14.75 6.58 16.08 7.97 16.08 9.67C16.08 10.08 15.75 10.42 15.33 10.42C14.92 10.42 14.58 10.08 14.58 9.67C14.58 8.79 13.92 8.08 13.11 8.08H12.75V11.47L14.26 12Z" fill="#252728" />
</svg>
{Math.round(deposit.min_amount)}%
</p>
</div>
<div className={styles.item}>
<p className={styles.itemTitle}>{t('FondBot.sum')}</p>
<p className={styles.value}>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M16.75 3.56V2C16.75 1.59 16.41 1.25 16 1.25C15.59 1.25 15.25 1.59 15.25 2V3.5H8.74999V2C8.74999 1.59 8.40999 1.25 7.99999 1.25C7.58999 1.25 7.24999 1.59 7.24999 2V3.56C4.54999 3.81 3.23999 5.42 3.03999 7.81C3.01999 8.1 3.25999 8.34 3.53999 8.34H20.46C20.75 8.34 20.99 8.09 20.96 7.81C20.76 5.42 19.45 3.81 16.75 3.56Z" fill="#252728" />
<path d="M20 9.84H4C3.45 9.84 3 10.29 3 10.84V17C3 20 4.5 22 8 22H16C19.5 22 21 20 21 17V10.84C21 10.29 20.55 9.84 20 9.84ZM9.21 18.21C9.16 18.25 9.11 18.3 9.06 18.33C9 18.37 8.94 18.4 8.88 18.42C8.82 18.45 8.76 18.47 8.7 18.48C8.63 18.49 8.57 18.5 8.5 18.5C8.37 18.5 8.24 18.47 8.12 18.42C7.99 18.37 7.89 18.3 7.79 18.21C7.61 18.02 7.5 17.76 7.5 17.5C7.5 17.24 7.61 16.98 7.79 16.79C7.89 16.7 7.99 16.63 8.12 16.58C8.3 16.5 8.5 16.48 8.7 16.52C8.76 16.53 8.82 16.55 8.88 16.58C8.94 16.6 9 16.63 9.06 16.67C9.11 16.71 9.16 16.75 9.21 16.79C9.39 16.98 9.5 17.24 9.5 17.5C9.5 17.76 9.39 18.02 9.21 18.21ZM9.21 14.71C9.02 14.89 8.76 15 8.5 15C8.24 15 7.98 14.89 7.79 14.71C7.61 14.52 7.5 14.26 7.5 14C7.5 13.74 7.61 13.48 7.79 13.29C8.07 13.01 8.51 12.92 8.88 13.08C9.01 13.13 9.12 13.2 9.21 13.29C9.39 13.48 9.5 13.74 9.5 14C9.5 14.26 9.39 14.52 9.21 14.71ZM12.71 18.21C12.52 18.39 12.26 18.5 12 18.5C11.74 18.5 11.48 18.39 11.29 18.21C11.11 18.02 11 17.76 11 17.5C11 17.24 11.11 16.98 11.29 16.79C11.66 16.42 12.34 16.42 12.71 16.79C12.89 16.98 13 17.24 13 17.5C13 17.76 12.89 18.02 12.71 18.21ZM12.71 14.71C12.66 14.75 12.61 14.79 12.56 14.83C12.5 14.87 12.44 14.9 12.38 14.92C12.32 14.95 12.26 14.97 12.2 14.98C12.13 14.99 12.07 15 12 15C11.74 15 11.48 14.89 11.29 14.71C11.11 14.52 11 14.26 11 14C11 13.74 11.11 13.48 11.29 13.29C11.38 13.2 11.49 13.13 11.62 13.08C11.99 12.92 12.43 13.01 12.71 13.29C12.89 13.48 13 13.74 13 14C13 14.26 12.89 14.52 12.71 14.71ZM16.21 18.21C16.02 18.39 15.76 18.5 15.5 18.5C15.24 18.5 14.98 18.39 14.79 18.21C14.61 18.02 14.5 17.76 14.5 17.5C14.5 17.24 14.61 16.98 14.79 16.79C15.16 16.42 15.84 16.42 16.21 16.79C16.39 16.98 16.5 17.24 16.5 17.5C16.5 17.76 16.39 18.02 16.21 18.21ZM16.21 14.71C16.16 14.75 16.11 14.79 16.06 14.83C16 14.87 15.94 14.9 15.88 14.92C15.82 14.95 15.76 14.97 15.7 14.98C15.63 14.99 15.56 15 15.5 15C15.24 15 14.98 14.89 14.79 14.71C14.61 14.52 14.5 14.26 14.5 14C14.5 13.74 14.61 13.48 14.79 13.29C14.89 13.2 14.99 13.13 15.12 13.08C15.3 13 15.5 12.98 15.7 13.02C15.76 13.03 15.82 13.05 15.88 13.08C15.94 13.1 16 13.13 16.06 13.17C16.11 13.21 16.16 13.25 16.21 13.29C16.39 13.48 16.5 13.74 16.5 14C16.5 14.26 16.39 14.52 16.21 14.71Z" fill="#252728" />
</svg>
{deposit.min_days} дней
</p>
</div>
</div>
<Button
theme={ButtonTheme.YELLOW}
align={'center'}
gap={10}
endIcon={undefined}
className={`${styles.button} ${styles.first}`}
onClick={() => {
onClose()
setId(deposit.id)
}}
>
<span>{t('FondBot.button.first')}</span>
</Button>
{
!small &&
<Button
theme={ButtonTheme.TRANSPARENT_BORDERED}
align={'center'}
gap={10}
endIcon={undefined}
className={styles.button}
onClick={onOpen}
>
<span>{t('FondBot.button.second')}</span>
</Button>
}
</div>
)
})
}
</div>
)
}import { TotalCardFund } from 'entities/TotalCardFund';
import cls from './styles.module.scss';
import { BalanceCard } from 'widgets/BalanceCard';
import { History } from 'widgets/History';
import { FondBot } from 'widgets/FondBot';
import { useEffect, useState, useRef } from 'react';
import { Modal } from 'shared/ui/Modal';
import { ContributiosModal } from 'widgets/ContributiosModal';
import { Chart } from 'widgets/Chart/ui/Chart';
import { OutModal } from 'widgets/OutModal/ui/OutModal';
import { OpenDepositModal } from 'widgets/OpenDepositModal/ui/OpenDepositModal';
import { useSelector } from 'react-redux';
import { getKeyError } from 'features/GetUserInfo/model/selectors/GetKeyError/GetKeyError';
import { KeyErrorModal } from 'widgets/KeyErrorModal';
import { ReplenishmentModal } from 'widgets/ReplenishmentModal';
const FondPage = () => {
const [modal, setModal] = useState(false);
const [outSum, setSum] = useState(0);
const [outModal, setOutModal] = useState(false);
const [replenishmentModal, setReplenishmentModal] = useState(false);
const [id, setId] = useState('');
const error = useSelector(getKeyError)
const [errorModal, setErrorModal] = useState(false);
useEffect(() => {
if (error && error.text !== '') {
setErrorModal(true)
}
}, [error])
return (
<div className={cls.Page}>
<Modal isOpen={id !== ''} onClose={() => setId('')}>
<OpenDepositModal onClose={() => setId('')} id={id} />
</Modal>
<Modal isOpen={outModal} onClose={() => setOutModal(false)}>
<OutModal sum={outSum} onClose={() => setOutModal(false)} />
</Modal>
<Modal isOpen={modal} onClose={() => setModal(false)}>
<ContributiosModal onClose={() => setModal(false)} />
</Modal>
<Modal isOpen={errorModal} onClose={() => setErrorModal(false)}>
<KeyErrorModal onClose={() => setErrorModal(false)} />
</Modal>
<Modal isOpen={replenishmentModal} onClose={() => setReplenishmentModal(false)}>
<ReplenishmentModal onClose={() => setReplenishmentModal(false)} />
</Modal>
<div className={cls.wrap}>
<TotalCardFund />
<BalanceCard setSum={setSum} smallView={false} onOpen={setOutModal} onOpenDeposit={setReplenishmentModal} />
</div>
<Chart />
<FondBot setId={setId} onOpen={() => setModal(true)} />
<History />
</div>
);
};
export default FondPage;