import React, { useState } from "react";

const FeedbackSystem = () => {

const [list, setList] = useState([{ label:"Readablity", up:0, down:0 }, { label:"Performance", up:0, down:0 }, { label:"Security", up:0, down:0 }, { label:"Documentation", up:0, down:0 }, { label:"Testing", up:0, down:0 } ]);

const handleUpvote = (index) => { const data = [...list] data[index].up+=1 setList(data) };

const handleDownvote = (index) => { const data = [...list] data[index].down+=1 setList(data) };

return ( {list.map((lists,index) => (

{lists.label}

upvote-btn-{lists.down}} onClick={() => handleDownvote(index)} > 👎 Downvote upvote-count-${lists.up}}> Upvotes: {lists.up}

downvote-count-${lists.down}}> Downvotes: {lists.down}

))} ); };

export default FeedbackSystem;

why the test cases are failing

This is my code but test cases failed!

import React, { useState } from "react";

const intialFeedback = [{ name: "Readability", upvote: 0, downvote: 0 }, { name: "Performance", upvote: 0, downvote: 0 }, { name: "Security", upvote: 0, downvote: 0 }, { name: "Documentation", upvote: 0, downvote: 0 }, { name: "Testing", upvote: 0, downvote: 0 }];

const FeedbackSystem = () => { const [feedback, setFeedback] = useState(intialFeedback)

const handleUpVote = (name) => { setFeedback(pre => { return pre.map(item => { if(item.name === name){ item.upvote+=1; }

    return item;
  }); 
})

}

const handleDownVote = (name) => { setFeedback(pre => { return pre.map(item => { if(item.name === name){ item.downvote+=1; }

    return item;
  }); 
})

}

return ( {feedback.map((item, index) => {handleDownVote(item.name)}} handleUpVote={()=>{handleUpVote(item.name)}} index={index} {...item} /> )} ); };

export default FeedbackSystem;

function FeedbackCard({ name,upvote, downvote, handleDownVote, handleUpVote, index }) { return (

{name}

upvote-btn-{index}} onClick={handleDownVote}> 👎 Downvote upvote-count-${index}}> Upvotes: {upvote}

downvote-count-${index}}> Downvotes: {downvote}

) }

Hello everyone,

to fix the problem with the testing feedback you need to modify 4 parts of the code so the test can pass.

The issue is that the initial code has data-testid attributes that are fixed to 0. This prevents the testing mechanism from working properly because the tests rely on unique identifiers for each element. To resolve this, you need to change the fixed 0 to a dynamic value (like using index), ensuring each element has a unique data-testid.

1 - first change the (data-testid) in the upvote and downvote buttons:

• upvote button -> data-testid={upvote-btn-${index}}
• downvote button -> data-testid={downvote-btn-${index}}

2- Finally, change the (data-testid) in the p tags that shows the upvote and downvote count inside of them like this:

• upvote count -> data-testid={upvote-count-${index}}
• downvote count -> data-testid={downvote-count-${index}}

you need to be mapping through an array of the feedback aspects for this to work.

this will hopefully solve the problem with the testing, if anything else occurs, check your code again.

import React, { useState } from "react"; import Form from './Form' const feedbackSystemArray = [ { id: 1, topics: 'Readability', upvote: 0, downvote: 0 }, { id: 2, topics: 'Performance', upvote: 0, downvote: 0 }, { id: 3, topics: 'Security', upvote: 0, downvote: 0 }, { id: 4, topics: 'Documentation', upvote: 0, downvote: 0 }, { id: 5, topics: 'Testing', upvote: 0, downvote: 0 },

]

const FeedbackSystem = () => { const [fbArray, setFbArray] = useState(feedbackSystemArray);

const updateUpvote = (id) => { setFbArray(prevArray => prevArray.map((prev) => { return prev.id === id ? { ...prev, upvote: prev.upvote + 1 } : prev; })) } const updateDownvote = (id) => { setFbArray(prevArray => prevArray.map((prev) => { return prev.id === id ? { ...prev, downvote: prev.downvote + 1 } : prev; })) }

return ( {fbArray && fbArray.map((feedback) => { return ( ) })} ); };

export default FeedbackSystem;

import React,{useState} from "react";

const Form = ({topic,id,upvote,downvote,updateDownvote,updateUpvote}) => {

return (

{topic}

updateUpvote(id)} className="py-10 px-15" data-testid={upvote-btn-${id}}> 👍 Upvote updateDownvote(id)} className="py-10 px-15 danger" data-testid={downvote-btn-${id}}> 👎 Downvote upvote-count-${id}}> Upvotes: {upvote}

downvote-count-${id}}}> Downvotes: {downvote}

); };

export default Form;