Не понимаю, почему не работает код. Кто-нибудь может подсказать? Знаю, что можно через useState сделать то, что я хочу, но просто интересно, почему через useRef не работает. Нужно при наведении на Item сделать HoverItem display: block.
import styled from 'styled-components'
import { getCurrency } from '../Functions/secondaryFunction'
import { useContext, useRef } from 'react'
import { Context } from '../Functions/context'
const List = styled.ul`
display: flex;
justify-content: space-between;
flex-wrap: wrap;
`
const Item = styled.li`
width: 210px;
height: 296px;
margin-top: 20px;
color: white;
z-index: 1;
position: relative;
&:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: black;
opacity: 50%;
z-index: -1;
}
&:hover {
cursor: pointer;
transition: box-shadow 0.3s ease-in-out, border 0.3s ease-in-out;
color: black;
box-shadow: 1px 1px 6px rgb(0 0 0 / 20%);
border: 1px solid #cccccc;
height: 350px;
&:after {
opacity: 0;
}
}
`
const ItemImg = styled.img`
width: 100%;
height: 296px;
`
const HoverItem = styled.div`
display: none;
`
export const ListItem = ({ itemList }) => {
const { openItem: { setOpenItem } } = useContext(Context)
const refHoverItem = useRef(null)
const hoverEffect = () => {
refHoverItem.style.display = 'block'
}
return (
<List>
{itemList.map(item => (
<Item
key={item.id}
onClick={() => setOpenItem(item)}>
<ItemImg src={item.img}/>
<HoverItem ref={refHoverItem} onMouseEnter={() => hoverEffect()}>
<p>{item.name}</p>
<p>{getCurrency(item.price)}</p>
</HoverItem>
</Item>
))}
</List>
)
}