tengo un problema al intentar hacer aparecer una sombra cuando pase el mouse sobre la imagen , el problema es que estas imagenes vienen de una lista la cual hago un map .
Aqui mi codigo
import React, { useState, useContext } from 'react';
import intialState from '../../intialState';
import '../../styles/components/banner.css';
const Banner = () => {
const home = intialState.itemsHome;
const [inHover, setHover] = useState(false);
return (
<div className="container h-100" >
<div className="row align-middle">
{home.map((items)=>{
return <div class="col-md-6 col-lg-4 column">
<div class="card gr-1" style={{position:'absolute'}}>
<img src={items.src} id={items.id} className="image" onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}/>
{inHover && <div id={"mask"+items.id} className="info" style={{position:'absolute'}}></div>}
</div>
</div>
}) }
</div>
</div>
);
}
export default Banner;
siendo img la imagen que viene src del foreach y el hover el que tiene la clase info, porfa si alguien me puede ayudar con esto o como se puede utilizar de manera correcta el tema del state en dentro del foreach.