You are viewing a single comment's thread. Return to all comments →
import React, { useState } from "react"; const FeedbackSystem = () => { const [feedbackItems, setFeedBackItems] = useState([ { id: 1, title: "Readability", upvote_count: 0, downvote_count: 0 }, { id: 2, title: "Performance", upvote_count: 0, downvote_count: 0 }, { id: 3, title: "Security", upvote_count: 0, downvote_count: 0 }, { id: 4, title: "Documentation", upvote_count: 0, downvote_count: 0 }, { id: 5, title: "Testing", upvote_count: 0, downvote_count: 0 }, ]) const handleVote = (count_key, index) => { setFeedBackItems(items => { const prevCount = items[index][count_key] items[index][count_key] = prevCount + 1 return [...items] }) } return ( <div className="my-0 mx-auto text-center w-mx-1200"> <div className="flex wrap justify-content-center mt-30 gap-30"> { feedbackItems.map((item, index) => ( <div key={index} className="pa-10 w-300 card"> <h2>{item.title}</h2> <div className="flex my-30 mx-0 justify-content-around"> <button onClick={() => handleVote("upvote_count", index)} className="py-10 px-15" data-testid={`upvote-btn-${index}`} > 👍 Upvote </button> <button onClick={() => handleVote("downvote_count", index)} className="py-10 px-15 danger" data-testid={`downvote-btn-${index}`} > 👎 Downvote </button> </div> <p className="my-10 mx-0" data-testid="upvote-count-0"> Upvotes: <strong>{item.upvote_count}</strong> </p> <p className="my-10 mx-0" data-testid="downvote-count-0"> Downvotes: <strong>{item.downvote_count}</strong> </p> </div> )) } </div> </div> ); }; I dont't why my test case all failed. export default FeedbackSystem;
Seems like cookies are disabled on this browser, please enable them to open this website
Code Review Feedback
You are viewing a single comment's thread. Return to all comments →