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

Sort by

recency

|

77 Discussions

|

  • cardox95
     + 0 comments

    I dont see clean up in the test file that ensures that after every test, React Testing Library completely unmounts the component and resets all internal hook states — so each test starts fresh.

    import { cleanup } from "@testing-library/react";

afterEach(() => {
  cleanup();
});

    import React, { useMemo, useReducer } from "react";

const init = [
  {
    name: "Readability",
    up: 0,
    down: 0,
  },
  {
    name: "Performance",
    up: 0,
    down: 0,
  },
  {
    name: "Security",
    up: 0,
    down: 0,
  },
  {
    name: "Documentation",
    up: 0,
    down: 0,
  },
  {
    name: "Testing",
    up: 0,
    down: 0,
  },
]
const reducer = (s, { aspectName, choice }) => {
  const state = [...s]
  const index = state.findIndex(a => a.name === aspectName)
  if (choice === "up")
    state[index].up += 1
  else
    state[index].down += 1
  return [...state]
}

const FeedbackSystem = () => {
  const [aspects, vote] = useReducer(reducer, [...init])
  const aspectsMemo = useMemo(() => aspects.map((a, i) => {
    return <div className="pa-10 w-300 card" key={a.name}>
      <h2>{a.name}</h2>
      <div className="flex my-30 mx-0 justify-content-around">
        <button className="py-10 px-15" data-testid={"upvote-btn-" + i}
          onClick={() => vote({ aspectName: a.name, choice: "up" })}>
          👍 Upvote
        </button>
        <button className="py-10 px-15 danger" data-testid={"downvote-btn-" + i}
          onClick={() => vote({ aspectName: a.name, choice: "down" })}>
          👎 Downvote
        </button>
      </div>
      <p className="my-10 mx-0" data-testid={"upvote-count-" + i}>
        Upvotes: <strong>{a.up}</strong>
      </p>
      <p className="my-10 mx-0" data-testid={"downvote-count-" + i}>
        Downvotes: <strong>{a.down}</strong>
      </p>
    </div>
  }), [aspects, vote])
  return (
    <div className="my-0 mx-auto text-center w-mx-1200">
      <div className="flex wrap justify-content-center mt-30 gap-30">
        {aspectsMemo}
      </div>
    </div>
  );
};

export default FeedbackSystem;

    `Any suggestions?

  • nicolae_gheorgh1
     + 0 comments

    Hint: you can create a component and use 2 props (one for the title and one for the index). The index is important for the tests, not for the component to work.

  • danieldram
     + 0 comments

    Before you begin any of these coding tests, you must read the test file to see how they test it. They are not testing functionality sometimes, your failing test might just be an improper test-id that has to be dynamically set.

  • abdulazizali1
     + 0 comments

    so many visible bugs in the hackerrank platform i dont even have to point out any

  • vinimadureira
     + 0 comments

    My new component:

    import React, {useState} from "react";


const ReviewFeedback = ( {name, id} ) => {


  const [upVotes, setUpVotes] = useState(0);
  const [downVotes, setDownVotes] = useState(0);
  
  const upVoteBtnClick = () => {

    setUpVotes(upVotes + 1);

  };


  const downVoteBtnClick = () => {

    setDownVotes(downVotes + 1);

  };


  return (
    <div className="my-0 mx-auto text-center w-mx-1200 card-custom">
      <div className="flex wrap justify-content-center mt-30 gap-30">
        <div className="pa-10 w-300 card">
          <h2>{name}</h2>
          <div className="flex my-30 mx-0 justify-content-around">
            <button className="py-10 px-15" data-testid={"upvote-btn-" + id} onClick={upVoteBtnClick}>
              👍 Upvote
            </button>
            <button className="py-10 px-15 danger" data-testid={"downvote-btn-" + id} onClick={downVoteBtnClick}>
              👎 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>
      </div>
    </div>
  );


};



export default ReviewFeedback;