We use cookies to ensure you have the best browsing experience on our website. Please read our cookie policy for more information about how we use cookies.
  1. Prepare
  2. React
  3. State Management
  4. Code Review Feedback
  5. Discussions

Code Review Feedback

  • pma_santos1993
     + 0 comments

    Hello there, so I have no idea why the code is missing the tests...i was getting an error reggarding the data-testsid but i made them dinamyc but im still missing those test cases, any help pls??

    import React from "react";

const FeedbackSystem = () => {

  const subjects = ["Readability", "Performance", "Security", "Documentation", "Testing"];
  const [votes, setVotes] = React.useState(subjects.map((s)=>({subject: s, upvotes: 0, downvotes: 0})));

  const handleUpVote = (index) =>{
    setVotes(prevState=>{
      const newData = [...prevState];
      newData[index].upvotes +=1;
      return newData
    })
  }

  const handleDownVote = (index) =>{
    setVotes(prevState=>{
      const newData = [...prevState];
      newData[index].downvotes +=1;
      return newData
    })
  }
  return (
    <div className="my-0 mx-auto text-center w-mx-1200">
      <div className="flex wrap justify-content-center mt-30 gap-30">
        {subjects.map((subject,index) =>(
          <div key={subject} className="pa-10 w-300 card">
          <h2>{subject}</h2>
          <div className="flex my-30 mx-0 justify-content-around">
            <button onClick={()=> handleUpVote(index)} className="py-10 px-15" data-testid={`upvote-btn-0-${subject}`}>
              👍 Upvote
            </button>
            <button onClick={()=> handleDownVote(index)} className="py-10 px-15 danger" data-testid={`downvote-btn-0-${subject}`}>
              👎 Downvote
            </button>
          </div>
          <p className="my-10 mx-0" data-testid={`upvote-count-0-${subject}`}>
            Upvotes: <strong>{votes[index].upvotes}</strong>
          </p>
          <p className="my-10 mx-0" data-testid={`downvote-count-0-${subject}`}>
            Downvotes: <strong>{votes[index].downvotes}</strong>
          </p>
        </div>
        ))}
      </div>
    </div>
  );
};

export default FeedbackSystem;