Your task is to create a React application called "Code Review Feedback" that tracks and manages feedback on various aspects of code quality. The component should have upvote and downvote functionality for each aspect, and it must meet all specified requirements.
image
Detailed Requirements
The CodeReviewFeedback component displays five aspects: Readability, Performance, Security, Documentation, and Testing.
Each aspect has two buttons labeled "Upvote" and "Downvote" to allow users to vote.
The initial count for upvotes and downvotes for each aspect is set to zero.
Clicking the "Upvote" button should increment the upvote count for that aspect by 1.
Clicking the "Downvote" button should increment the downvote count for that aspect by 1.
Ensure the counts update in the UI immediately upon clicking.
The component should have a subtle animation when the voting count is updated to enhance the user experience.
Sample Interaction
Initial State
Display all five aspects with their respective upvote and downvote buttons.
Each aspect shows an initial count of 0 for upvotes and downvotes.
User Action 1
User clicks "Upvote" for Readability.
The upvote count for Readability displays 1.
User Action 2
User clicks "Downvote" for Performance.
The downvote count for Performance displays 1.
User Action 3 3. User clicks "Upvote" for Security and Documentation multiple times. 4. The upvote count for Security displays 2 and Documentation displays 3.
Hey there! Please enter the full-screen mode for the best experience
Authorishanhackerrank
DifficultyMedium
Max Score60
Submitted By195
Need Help?
View discussions
View top submissions
rate this challenge
MORE DETAILS
Download problem statement
Suggest Edits
Share on Facebook
`import React, { useState } from "react";
const categories = [
{ id: 0, name: "Readability" },
{ id: 1, name: "Performance" },
{ id: 2, name: "Security" },
{ id: 3, name: "Documentation" },
{ id: 4, name: "Testing" },
];
const FeedbackCategory = ({ id, name, upvotes, downvotes, onUpvote, onDownvote }) => (
{name}
{/* Upvote button /}
className="py-10 px-15"
data-testid={`upvote-btn-${id}`}
onClick={() => onUpvote(id)}
>
👍 Upvote
{/ Downvote button /}
className="py-10 px-15 danger"
data-testid={`downvote-btn-${id}`}
onClick={() => onDownvote(id)}
>
👎 Downvote
{/ Display counts */}
Upvotes: {upvotes}
Downvotes: {downvotes}
);
const FeedbackSystem = () => {
const [votes, setVotes] = useState(
categories.reduce(
(acc, category) => ({
...acc,
[category.id]: { upvotes: 0, downvotes: 0 },
}),
{}
)
);
const handleUpvote = (id) => {
setVotes((prevVotes) => ({
...prevVotes,
[id]: { ...prevVotes[id], upvotes: prevVotes[id].upvotes + 1 },
}));
};
const handleDownvote = (id) => {
setVotes((prevVotes) => ({
...prevVotes,
[id]: { ...prevVotes[id], downvotes: prevVotes[id].downvotes + 1 },
}));
};
return (
{categories.map(({ id, name }) => (
key={id}
id={id}
name={name}
upvotes={votes[id].upvotes}
downvotes={votes[id].downvotes}
onUpvote={handleUpvote}
onDownvote={handleDownvote}
/>
))}
);
};
export default FeedbackSystem;`
Top comments (0)