Discussion on Code Review Feedback Challenge

Sort by

recency

|

51 Discussions

|

5 days ago+ 0 comments

i have done tis and for manual testing its working perfectly fine idk whats the issue none of the test cases are passing

import React, { useState } from "react";

const FeedbackSystem = () => {

  const[upvote,setUpvote]=useState([0,0,0,0,0]);
  
  const[downvote,setDownvote]=useState([0,0,0,0,0]);

  const titles=['Readability','Performance','Security','Documentation','Testing']
  return (
    titles.map((value,index)=>
    <div key={index} className="my-0 mx-auto text-center w-mx-1200">
      <div className="flex wrap justify-content-center mt-30 gap-30">
        <div className="pa-10 w-300 card">
          <h2>{value}</h2>
          <div className="flex my-30 mx-0 justify-content-around">
            <button className="py-10 px-15"
            data-testid="upvote-btn-0"
            onClick=
            {()=>setUpvote
              (prev=>
              {
              let newVotes=[...prev];
              newVotes[index]=prev[index]+1
              return newVotes
            
            })}
            >
              👍 Upvote
            </button>
            <button className="py-10 px-15 danger" data-testid="downvote-btn-0"
            onClick=
            {()=>setDownvote
              (prev=>
              {
              let newVotes=[...prev];
              newVotes[index]=prev[index]+1
              return newVotes
            
            })}
            >
              👎 Downvote
            </button>
          </div>
          <p className="my-10 mx-0" data-testid="upvote-count-0">
            Upvotes: <strong>{upvote[index]}</strong>
          </p>
          <p className="my-10 mx-0" data-testid="downvote-count-0">
            Downvotes: <strong>{downvote[index]}</strong>
          </p>
        </div>
      </div>
    </div>
    )
  );
};

export default FeedbackSystem;

1 week ago+ 0 comments

The only way I could get all tests to pass was as follows:

Create a component which will represent a specific test called Card, for example. Into this you pass props for the name of the test, Readability, Performance etc. and a prop for an index.

In the Card component create two states, one to handle up votes and another down votes. These hold the number of votes, a single digit.

Also in the Card create onClick functions for each up and down vote button. These functions simply update the state for the up and down votes by adding one on each click.

In the main component, Feedback, import the Card component. Then create an array for the test titles. Map over this array, putting in a title into the Card component as a prop along with the index of the title from the array. Thus you create a Card component for each of the test titles.

You also need to ensure the test ids in the Card component are dynamic by using the index as a unique reference.

Overall, this approach is simpler and more elegant. It also avoids complex coding in the map function.

4 weeks ago+ 1 comment

Why is my implementation not seen as correct in any way?

The functonality works as expected, it even for some reason says I'm not passing a key to the mapped child but I am?

import React, { useState } from "react";

const aspects = [
  {id: 1, title: "Readability", upVotes: 0, downVotes: 0},
  {id: 2, title: "Performance", upVotes: 0, downVotes: 0},
  {id: 3, title: "Security", upVotes: 0, downVotes: 0},
  {id: 4, title: "Documentation", upVotes: 0, downVotes: 0},
  {id: 5, title: "Testing", upVotes: 0, downVotes: 0}
];

const FeedbackSystem = () => {
  const [data, setData] = useState(aspects)

  return (
   <div>
     {data.map((item) => {
      return (
        <div key={item.id} className="my-0 mx-auto text-center w-mx-1200">
          <div className="flex justify-content-center mt-30 gap-30">
            <div className="pa-10 w-300 card">
              <h2>{item.title}</h2>

              <div className="flex my-30 mx-0 justify-content-around">
                <button 
                  className="py-10 px-15" 
                  data-testid="upvote-btn-0" 
                  onClick={() => {setData([...data, item.upVotes = item.upVotes + 1 ])}}
                >
                  👍 Upvote
                </button>

                <button 
                  className="py-10 px-15 danger" 
                  data-testid="downvote-btn-0" 
                  onClick={() => {setData([...data, item.downVotes = item.downVotes + 1 ])}}
                >
                  👎 Downvote
                </button>
              </div>
              
              <p className="my-10 mx-0" data-testid="upvote-count-0">
                Upvotes: <strong>{item.upVotes}</strong>
              </p>

              <p className="my-10 mx-0" data-testid="downvote-count-0">
                Downvotes: <strong>{item.downVotes}</strong>
              </p>
            </div>
          </div>
      </div>
      )})}
   </div>
  );
};

export default FeedbackSystem;

4 weeks ago+ 1 comment

data-testid should be dynamic it should not always 0, they should be 0,1,2,3,4,5 based on index in map

3 weeks ago+ 2 comments

It seems it was the way I was updating the state, I was basically adding a new value to the data array everytime I upvote or downvote.

So chaning it to this seems to have worked and it now passes all the tests. setData(data.map(childItem => childItem.id === item.id ? { ...childItem, upVotes: childItem.upVotes + 1 } : childItem));

2 weeks ago+ 0 comments

Also to pass the tests, data-testid should be dynamic like {upvote-btn-${index}}.

View more Comments..

4 weeks ago+ 0 comments

The simplest solution is to pull the card into another component.

This makes each card hold the simplest possible state.

import React, { useState } from "react";

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

const FeedbackCard = ({ aspectTitle, id }) => { 
  const [upvotes, setUpvotes] = useState(0);
  const [downvotes, setDownvotes] = useState(0);

  const handleUpvote = () => setUpvotes(upvotes+1);
  const handleDownvote = () => setDownvotes(downvotes+1);

  return (
    <div className="pa-10 w-300 card">
      <h2>{aspectTitle}</h2>
      <div className="flex my-30 mx-0 justify-content-around">
        <button 
          className="py-10 px-15" 
          data-testid={`upvote-btn-${id}`}
          onClick={handleUpvote}
          >
          👍 Upvote
        </button>
        <button
          className="py-10 px-15 danger"
          data-testid={`downvote-btn-${id}`}
          onClick={handleDownvote}
        >
          👎 Downvote
        </button>
      </div>
      <p className="my-10 mx-0" data-testid={`upvote-count-${id}`}>
        Upvotes: <strong>{upvotes}</strong>
      </p>
      <p className="my-10 mx-0" data-testid={`downvote-count-${id}`}>
        Downvotes: <strong>{downvotes}</strong>
      </p>
    </div>
  );
};

const FeedbackSystem = () => {
  return (
    <div className="my-0 mx-auto text-center w-mx-1200">
      <div className="flex wrap justify-content-center mt-30 gap-30">
        {aspectTitles.map((aspectTitle, index) => (
          <FeedbackCard {...{ aspectTitle, id: index, key: index }} />
        ))}
      </div>
    </div>
  );
};

export default FeedbackSystem;

Be advised, this is not ready for easy state upload or anything.

Since this is a training excercise, we optimize for code simplicity.

4 weeks ago+ 1 comment

I can't solve the problem User Action 3 User clicks "Vote" for Security and Documentation multiple times. 4. The number of votes for Security is Sprunki Retake shown as 2 and Documentation is shown as 3. please help me!

4 weeks ago+ 0 comments

assuming that you've set up this state with:

const [upvotes, setUpvotes] = useState(0);

your function handling the click should call:

setUpvotes(upvotes+1)

while your upvotes display should just display {upvotes}

This should trigger state setting and rerender immediatelly upon click.

Sort by

|

51 Discussions

|

Cookie support is required to access HackerRank

Please signup or login in order to view this challenge