I'm mapping over an array and rendering that information on to blocks in a web page. I want to show an overlay when the user hovers over the block. At the moment, dev tools shows me that I'm able to catch the id of the block, but when I click on the block containing the id (in dev tools). The whole window is covered with the overlay (regardless of the block clicked in).
I'd like help finding a way to simply make sure that only the item being clicked has an overlay.
import styled from "styled-components";
export const ContainerRecipes = styled.div`
background-color: blue;
width: 100%;
overflow: scroll;
display: grid;
grid-template-columns: 1fr 1fr;
`;
export const ContainerCard = styled.div`
background-color: #dda15e;
// position: absolute;
width: 100%;
margin: 0 auto;
// padding-bottom: 3rem;
display: flex;
flex-direction: column;
justify-content; center;
// align-items: center;
text-align: center;
// width: 80%;
font-size: clamp(0.9rem, 2vw, 2rem);
&:hover {
background-color: #bc6c25;
}
`;
export const ContainerRelative = styled.div`
position: relative;
background-color: orange;
border: 3px solid black;
`
export const CardOverlay = styled.div`
display: ${(props) => (props.description ? "initial" : "none")};
position: absolute;
top: 0;
height: 100%;
width: 100%;
background-color: #000;
opacity: 0.95;
`;import React, { useState, useEffect } from "react";
import {
ContainerRecipes,
ContainerCard,
ContainerRelative,
CardOverlay
} from "../../components/StyledElements/FoodSelectionStyles";
// import {dataObject} from "../../dataObject"
import fetchFromAPI from "../../services/helper/fetchFromAPI";
import env from "react-dotenv";
const FoodSelection = () => {
const [recipes, setRecipes] = useState([]);
const [hoverRecipe, setHoverRecipe] = useState(false)
useEffect(() => {
getData();
}, []);
const getData = async () => {
try {
const { results } = await fetchFromAPI(
`https://api.spoonacular.com/recipes/complexSearch?apiKey=${env.API_KEY}&cuisine=italian`
);
setRecipes(results);
} catch (error) {
console.log(error.message);
}
};
const renderRecipes = (dataObject) =>
dataObject.map((item) => {
const { id, title, image } = item;
let card = item.id;
return (
<ContainerRelative
key={id}
onMouseEnter={() => {if (card) {console.log(card);
setHoverRecipe(true)}}}
onMouseLeave={() => {if (card) {console.log("Elvis has left the building");
setHoverRecipe(false)}}}
>
<ContainerCard>
<h2>{title}</h2>
<img alt={title} src={image} />
</ContainerCard>
<CardOverlay description={hoverRecipe}></CardOverlay>
</ContainerRelative>
);
});
return (
<ContainerRecipes>
{renderRecipes(dataObject)}
</ContainerRecipes>
);
};
export default FoodSelection;export const dataObject = [
{
id: 654959,
image: "https://spoonacular.com/recipeImages/654959-312x231.jpg",
imageType: "jpg",
title: "Pasta With Tuna",
},
{
id: 511728,
image: "https://spoonacular.com/recipeImages/511728-312x231.jpg",
imageType: "jpg",
title: "Pasta Margherita",
},
{
id: 654812,
image: "https://spoonacular.com/recipeImages/654812-312x231.jpg",
imageType: "jpg",
title: "Pasta and Seafood",
},
{
id: 654857,
image: "https://spoonacular.com/recipeImages/654857-312x231.jpg",
imageType: "jpg",
title: "Pasta On The Border",
},
{
id: 654883,
image: "https://spoonacular.com/recipeImages/654883-312x231.jpg",
imageType: "jpg",
title: "Pasta Vegetable Soup",
},
{
id: 654928,
image: "https://spoonacular.com/recipeImages/654928-312x231.jpg",
imageType: "jpg",
title: "Pasta With Italian Sausage",
},
]