Пытаюсь из полученных данных отобразить на странице контейнеры, но что-то не работает.
Прикол в том, что данные то приходят в виде массива с элементами, я это проерял через console.log() по нажатию кнопки на странице, но элементы не отображаются
Хук:
import { useCallback, useState } from "react"
import { operators } from "../pages/api/data/operators"
export const useHttp: any = () => {
const request = async(url: string) => {
const responce = await fetch(`http://localhost:3000${url}`)
const data = await responce.json()
if (!data) {
return{
notFound: true,
}
}
return data
}
return { request }
}
Блок где получаю данные и отображаю их:
const OperatorCardsPage: React.FC<IOperators> = () => {
const [operators, setOperators] = useState<any[]>();
const [val, setVal] = useState<number>(0);
const { request } = useHttp()
const Responce = async () => {
const data = await request('/api/hello');
setOperators(data);
}
useEffect(() => {
Responce();
operators && operators.map((arr) => {
setVal(val + 1);
})
console.log(val)
}, [])
return (
<OperatorsBlock>
{operators && operators.map(element => {
<OperatorCard nameImage={element.image} title={element.title}></OperatorCard>
})}
{/* <OperatorCard nameImage="beeline.png" title="Билайн"></OperatorCard>
<OperatorCard nameImage="mts.png" title="МТС"></OperatorCard>
<OperatorCard nameImage="megafon.png"title="Мегафон"></OperatorCard> */}
<button onClick={() => Responce()}>fsaf</button>
</OperatorsBlock>
);
}
Контейнер:
const OperatorCard: React.FC<OperatorCard> = (props: any) => {
return (
<Card>
<Icon src ={`/images/operators/${props.nameImage}`} alt="" />
<Title>{props.title}</Title>
</Card>
);
}
