• + 0 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;