import React, { useState } from "react";

const initialValue = { readability: { upvotes: 0, downvotes: 0 }, performance: { upvotes: 0, downvotes: 0 }, security: { upvotes: 0, downvotes: 0 }, documentation: { upvotes: 0, downvotes: 0 }, testing: { upvotes: 0, downvotes: 0 }, };

const FeedbackSystem = () => { const [votes, setVotes] = useState(initialValue);

const handleVote = (name, type) => { setVotes((prevVotes) => ({ ...prevVotes, [name]: { ...prevVotes[name], [type]: prevVotes[name][type] + 1, // Increment upvote or downvote }, })); };

return ( {Object.keys(initialValue).map((key) => (

{key.charAt(0).toUpperCase() + key.slice(1)}

upvote-btn-{key}} // ✅ Now unique onClick={() => handleVote(key, "downvotes")} > 👎 Downvote upvote-count-${key}}> Upvotes: {votes[key]?.upvotes ?? 0}

downvote-count-${key}}> Downvotes: {votes[key]?.downvotes ?? 0}

))} ); };

export default FeedbackSystem; What is wrong with this?