I have a project where I'm mapping out an array with a like-button within the mapped out div.
This button should work only for the specific parent div - at the moment it toggles everything.
In my code, I tried to do it the long way around with a switch (it did not work, and also not good). I tried to look this up in various ways.
I think I need to work with e.target, but I'm not sure how to translate e.target.value to a state. For example - if I push button with value 5 (in div 5) I want the showDiv-state to take in the value (showDiv{5}) and be set to true.
What am I missing here?
import { useState} from "react";
import { BulletinBoard } from "./BulletinBoard";
import PostLiked from "./PostLiked";
const ReactPost = () => {
const [showDiv, setShowDiv] = useState(false);
const [showDiv2, setShowDiv2] = useState(false);
const [showDiv3, setShowDiv3] = useState(false);
const [showDiv4, setShowDiv4] = useState(false);
const [showDiv5, setShowDiv5] = useState(false);
const [likeButton, setLikeButton] = useState(true);
const pickAndShow= (e) => {
e.preventDefault();
const chosenItem = e.currentTarget.value;
switch(parseInt(chosenItem)){
case 1:
console.log("Ett")
setShowDiv1(true);
setLikeButton(false);
case 2:
console.log("Två")
setShowDiv2(true);
setLikeButton(false);
break;
case 3:
console.log("Tre")
setShowDiv3(true);
setLikeButton(false);
break;
case 4:
console.log("Fyra")
setShowDiv4(true);
setLikeButton(false);
break;
case 5:
console.log("Fem")
setShowDiv5(true);
setLikeButton(false);
break;
default:
console.log("Error")
}
}
}
return (
<div className="grid">
{BulletinBoard.map((item) => (
<div className="grid-item"
key={item.id}>
<span className="row">
<p>Fråga #{item.id}</p>
<h2>{item.question}</h2>
</span>
<h3>{item.answer}</h3>
<div
className={`wrapper__${item.id}`}
>
{!showDiv ? (
<button
className="likebutton"
value={item.id}
onClick={pickAndShow}
> </button>
<div data-key={0 + item.id}>
{showDiv1 ?
<PostLiked/>
enter code here
:null }
</div>
</div>
</div>
))}
</div>
);
}
export default ReactPost;
EDIT: Here is a picture of what is happening now:
enter image description here
When the checkbox is clicked, every div within the mapped divs change:
enter image description here
