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

|

81 Discussions

|

  • nishkumar562
     + 0 comments

    whats going on i dont understand why its failing

    const FeedbackSystem = () => { const [aspects, setAspects] = useState([ { title: "Readability", upvotes: 0, downvotes: 0 }, { title: "Performance", upvotes: 0, downvotes: 0 }, { title: "Security", upvotes: 0, downvotes: 0 }, { title: "Documentation", upvotes: 0, downvotes: 0 }, { title: "Testing", upvotes: 0, downvotes: 0 } ]); function hndlupvote(index) { const copyaspects = [...aspects]; copyaspects[index].upvotes +=1; setAspects(copyaspects) } function hndldownvote(index) { const copyaspects = [...aspects]; copyaspects[index].downvotes +=1; setAspects(copyaspects) }

    return ( {aspects.map((item,index) => (

    {item.title}

    hndlupvote(index)}> 👍 Upvote hndldownvote(index)}> 👎 Downvote Upvotes: {item.upvotes}

    Downvotes: {item.downvotes}

    ))} ); };

    export default FeedbackSystem;

  • smita3031
     + 1 comment

    What's wrong with my code-

    import React, { useState } from "react";

const FeedbackSystem = () => {
  return (
    <div>
  <FeedbackSystem1 name ="Readability"/>
   <FeedbackSystem1 name ="Performance"/>
    <FeedbackSystem1 name ="Security"/>
     <FeedbackSystem1 name ="Documentation"/>
     <FeedbackSystem1 name ="Testing"/>
     </div>
  )
}



const FeedbackSystem1 = (props) => {
  const [downVote, setDownVote] = useState(0);
  const [upVote, setUpVote] = useState(0);

  const handlebutton = (flag) =>{
if(flag){
  setUpVote(upVote+1);

} else {
  setDownVote(downVote+1);
}
}
  
  return (
    <div 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>{props.name}</h2>
          <div className="flex my-30 mx-0 justify-content-around">
            <button className="py-10 px-15" data-testid="upvote-btn-0" onClick={()=>handlebutton(true)}>
              👍 Upvote
            </button>
            <button className="py-10 px-15 danger" data-testid="downvote-btn-0" onClick={()=>handlebutton(false)}>
              👎 Downvote
            </button>
          </div>
          <p className="my-10 mx-0" data-testid="upvote-count-0">
            Upvotes: <strong>{upVote}</strong>
          </p>
          <p className="my-10 mx-0" data-testid="downvote-count-0">
            Downvotes: <strong>{downVote}</strong>
          </p>
        </div>
      </div>
    </div>
  );
};

export default FeedbackSystem;

  • test__new
     + 0 comments

    I have working code for this problem i am able to check required functionality, but its giving 0 score via run tests

  • manjuvnachu
     + 0 comments

    my test cases are failing! although the solution works fine

  • 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?