This is my FeedBack Component

const FeedbackSystem = () => { // const [Upvote, setUpvote] = React.useState(0) // const [Downvote, setDownvote] = React.useState(0) const [cards, setCards] = React.useState( [ { id: 0, name: "Readability", Upvote: 0, Downvote: 0 }, { id: 1, name: "Performance", Upvote: 0, Downvote: 0 }, { id: 2, name: "Security", Upvote: 0, Downvote: 0 }, { id: 3, name: "Documentation", Upvote: 0, Downvote: 0 }, { id: 4, name: "Testing", Upvote: 0, Downvote: 0 }, ])

function upVote(id) { //setUpvote(prev => prev + 1)

setCards(prev =>
  prev.map((card, index) => (
    index == id ?
      { ...card, Upvote: card.Upvote + 1 } : card
  )))

}

function downVote(id) { //setDownvote(prev => prev + 1) setCards(prev => prev.map((card, index) => ( index == id ? { ...card, Downvote: card.Downvote + 1 } : card ))) }

return ( { cards.map((card, index) => (

{card.name}

            {/* <button className="py-10 px-15" data-testid={`upvote-btn-${index}`} onClick={() => upVote(index)}>
              👍 Upvote
            </button>
            <button className="py-10 px-15 danger" data-testid={`downvote-btn-${index}`} onClick={() => downVote(index)}>
              👎 Downvote
            </button> */}
          </div>
          <p className="my-10 mx-0" data-testid={`upvote-count-${index}`}>
            Upvotes: <strong>{card.Upvote}</strong>
          </p>
          <p className="my-10 mx-0" data-testid={`downvote-count-${index}`}>
            Downvotes: <strong>{card.Downvote} </strong>
          </p>
        </div>
      )
      )
    }
  </div>
</div>

); };

export default FeedbackSystem;

This is my Button Component

export default function Button({upVote,downVote,id}) {

return ( <> upvote-btn-{id}} onClick={downVote}> 👎 Downvote ) } Where I made misatke , my test cases are failing

WWhere

import React, {useState} from "react";

const aspects = ["Readability", "Performance", "Security", "Documentation", "Testing"];

const FeedbackSystem = () => { const [feedback, setFeedback] = useState( aspects.map(() => ({ upvotes: 0, downvotes: 0 })) );

const handleUpvote = (index) => { const newFeedback = [...feedback]; newFeedback[index].upvotes ++; setFeedback(newFeedback); };

const handleDownvote = (index) => { const newFeedback = [...feedback]; newFeedback[index].downvotes ++; setFeedback(newFeedback); }; return ( {aspects.map((aspect, index) => (

{aspect}

export default FeedbackSystem;

Here is my simple solution.

`import React, { useState } from "react";

const FeedbackSystem = () => { const list = [ { label: "Readability", upVote: 0, downVote: 0 }, { label: "Performance", upVote: 0, downVote: 0 }, { label: "Security", upVote: 0, downVote: 0 }, { label: "Documentation", upVote: 0, downVote: 0 }, { label: "Testing", upVote: 0, downVote: 0 } ]; const [aspectList, setAspectList] = useState(list);

const handleDownVote = (index) => { aspectList[index].downVote += 1; setAspectList([...aspectList]) }

const handleUpVote = (index) => { aspectList[index].upVote += 1; setAspectList([...aspectList]) }

return ( {aspectList.map((aspect, index) => (

{aspect.label}

export default FeedbackSystem;

`

What's wrong with this code? I've used a reducer instead of useState hook.

import { useReducer } from 'react';

const FeedbackSystem = () => {
  const initialState = {
    readability: {
      upvote: 0,
      downvote: 0,
    },
    performance: {
      upvote: 0,
      downvote: 0,
    },
    security: {
      upvote: 0,
      downvote: 0,
    },
    documentation: {
      upvote: 0,
      downvote: 0,
    },
    testing: {
      upvote: 0,
      downvote: 0,
    },
  };

  const aspectReducer = (state, action) => {
    switch (action.type) {
      case 'UPVOTE':
        return {
          ...state,
          [action.aspect]: {
            ...state[action.aspect],
            upvote: state[action.aspect].upvote + 1,
          },
        };

      case 'DOWNVOTE':
        return {
          ...state,
          [action.aspect]: {
            ...state[action.aspect],
            downvote: state[action.aspect].downvote + 1,
          },
        };

      default:
        return state;
    }
  };

  const [state, dispatch] = useReducer(aspectReducer, initialState);

  return (
    <div className="my-0 mx-auto text-center w-mx-1200">
      <div className="flex wrap justify-content-center mt-30 gap-30">
        {Object.keys(initialState).map((el) => (
          <div key={el} className="pa-10 w-300 card">
            <h2>{el.charAt(0).toUpperCase() + el.slice(1)}</h2>
            <div className="flex my-30 mx-0 justify-content-around">
              <button
                onClick={() => dispatch({ type: 'UPVOTE', aspect: el })}
                className="py-10 px-15"
                data-testid={`upvote-btn-${el}`}
              >
                👍 Upvote
              </button>
              <button
                onClick={() => dispatch({ type: 'DOWNVOTE', aspect: el })}
                className="py-10 px-15 danger"
                data-testid={`downvote-btn-${el}`}
              >
                👎 Downvote
              </button>
            </div>
            <p className="my-10 mx-0" data-testid="upvote-count-0">
              Upvotes: <strong>{state[el]?.upvote || 0}</strong>
            </p>
            <p className="my-10 mx-0" data-testid="downvote-count-0">
              Downvotes: <strong>{state[el]?.downvote || 0}</strong>
            </p>
          </div>
        ))}
      </div>
    </div>
  );
};

export default FeedbackSystem;

data-testid="downvote-count-0"> dont forget to change id