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;