I am very new in react, and am trying to create a function that maps 5 cards on the screen from an array but is able to change the CSS of only the one that is clicked.
export default function Projects(){
const [card, setCard] = useState("cardOn");
const toggleCard = (props) => {
if(card === "cardOff"){
setCard("cardOn");
console.log("card is now on");
}
else{
setCard("cardOff");
console.log("card is now off");
}
}
return(
<div id = "projectsGridContainer">
<div id = "projectsGrid">
{projs.map(function(project){
return(
<div id = "projectContainer" className = {card} onClick={toggleCard} >
<div className="projectImage">{project.image}</div>
<p id="projectTitle">{project.title}</p>
{/* <p>{project.description}</p> */}
</div>
);
})}
</div>
</div>
)
}
The code works in changing the CSS of all the cards at once. Is there a way to make it so only the one clicked changes?
3
Answers
Your two state values are "cardOn" and "cardOff". Given either of those values, which of your cards do you think is currently "clicked"?
Store that information in state. For example, if your "projects" have an ID value then you can store that in state. Initially no card would be clicked:
You can set the clicked card in the event handler:
And use that value to determine the class name:
One solution would be to make a
Card
an own component with it’s own state. Your code could look like this:As
<Card key={index} project={project} />
gets an Object with the attributeskey
andproject
here under the hood, the curly braces around the parameterproject
in the definition ofCard
are important for destructuring. You could also use justprops
as parameter without curly braces and then in the function useprops.project
.The use of
index
as a key is just an example and considered bad practice as the Sonarlint rule (javascript:S6479) states. The reason is that theindex
can change. Better use a unique id, maybe your projects have such an attribute anyway.There are several ways you can achieve this one of which is to store the unique identifier of each project in your state and use it to check if a card is on or off ( this would usually be the
id
)Also do not forget to add a unique key prop to each item in your list