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

|

67 Discussions

|

  • cheerneni_rajen1
     + 0 comments

    my UI is Updating the count correct but test cases not paaing why.

    import React, { useState } from "react";

    const FeedbackSystem = () => { const [aspects, setAspects] = useState({"Readability" : {upVote : 0 , downVote : 0}, "Performance" : {upVote : 0 , downVote : 0}, "Security" : {upVote : 0 , downVote : 0}, "Documentation" : {upVote : 0 , downVote : 0}, "Testing" : {upVote : 0 , downVote : 0}, })

    const onChangeVoteCount = (aspect , action) => { setAspects((prev) => ({ ...prev , [aspect] : {...prev[aspect], [action] : prev[aspect][action] + 1 } })) }

    return ( {Object.keys(aspects).map((key,i) => (

    {key}

    downvote-btn-Extra close brace or missing open brace{i}} onClick={() => onChangeVoteCount(key , "downVote")}> 👎 Downvote upvote-count-${i}}> Upvotes: {aspects[key].upVote}

    downvote-count-${i}}> Downvotes: {${aspects[key].downVote}}

    ))}

      </div>
</div>

    ); };

    export default FeedbackSystem;

  • nekit_exe
     + 0 comments

    Turns out, you must update dynamically data-testid fields, like data-testid="downvote-count-0" should be 0, 1, 2, etc for each card, otherwise tests will fail. It's not even mentioned in the description, it made me spend a lot of time on this simple task.

  • arpittiwari_in
     + 0 comments

    MY solution:

    import React, { useState } from "react";

const FeedbackSystem = () => {
  const aspects = ["Readability", "Performance", "Security", "Documentation", "Testing"];
  const [upVotes, setUpVotes] = useState({
    Readability: 0,
    Performance: 0,
    Security: 0,
    Documentation: 0,
    Testing: 0
  });

  const [downVotes, setDownVotes] = useState({
    Readability: 0,
    Performance: 0,
    Security: 0,
    Documentation: 0,
    Testing: 0
  });

  const handleUpvotes = (aspect) => {
    setUpVotes((prev) => ({...prev, [aspect]: prev[aspect] + 1}))
  }
  const handleDownVotes = (aspect) => {
    setDownVotes((prev) => ({...prev, [aspect]: prev[aspect]+1}));
  }

  return (
    <div className="my-0 mx-auto text-center w-mx-1200">
      <div className="flex wrap justify-content-center mt-30 gap-30">
        {aspects.map((aspect,index) => (
        <div className="pa-10 w-300 card" key={index}>
          <h2>{aspect}</h2>
          <div className="flex my-30 mx-0 justify-content-around">
            <button className="py-10 px-15" data-testid={`upvote-btn-${index}`}
 onClick={() => handleUpvotes(aspect)}>
              👍 Upvote
            </button>
            <button className="py-10 px-15 danger" data-testid={`downvote-btn-${index}`} onClick={() => handleDownVotes(aspect)}>
              👎 Downvote
            </button>
          </div>
          <p className="my-10 mx-0" data-testid={`upvote-count-${index}`}>
            Upvotes: <strong>{upVotes[aspect]}</strong>
          </p>
          <p className="my-10 mx-0" data-testid={`downvote-count-${index}`}>
            Downvotes: <strong>{downVotes[aspect]}</strong>
          </p>
        </div>
        ))}
      </div>
    </div>
  );
};

export default FeedbackSystem;

  • Sid_Tutai95
     + 0 comments

    I have used one of the most useful array method reduce, to solve this problem.

    import React, { useState } from "react";

    const ASPECTS = ["Redability", "Performence", "Security", "Documentation", "Testing"];

    const FeedbackSystem = () => {

    const [votes, setVotes] = useState( ASPECTS.reduce((acc, aspect) => ({ ...acc, [aspect.toLowerCase()]: {upvote: 0, downvote: 0} }), {}) );

    const handleUpvote = (aspectName) => { const key = aspectName.toLowerCase(); setVotes((prevVotes) => ({ ...prevVotes, [key]: { ...prevVotes[key], upvote: prevVotes[key].upvote + 1 } })) }

    const handleDownvote = (aspectName) => { const key = aspectName.toLowerCase(); setVotes((prevVotes) => ({ ...prevVotes, [key]: { ...prevVotes[key], downvote: prevVotes[key].downvote + 1 } })) }

    return ( { ASPECTS.map((item, idx) => (

    {item}

    upvote-btn-Extra close brace or missing open brace{idx}} onClick={() => handleDownvote(item)}> 👎 Downvote upvote-count-${idx}}> Upvotes: {votes[item.toLowerCase()].upvote}

    downvote-count-${idx}}> Downvotes: {votes[item.toLowerCase()].downvote}

    )) } ); };

    export default FeedbackSystem;

  • prajwallokhande3
     + 0 comments

    ### Simple and Easy Solution

    import React, { useState } from "react";

const FeedbackSystem = () => {
  const[feedbacks,setFeedbacks] = useState(
    [
      {title:'Readability',upvote:0,downvote:0},
      {title:'Performance',upvote:0,downvote:0},
      {title:'Security',upvote:0,downvote:0},
      {title:'Documentation',upvote:0,downvote:0},
      {title:'Testing',upvote:0,downvote:0}
    ]
  )

  const handleUpvote = (index) => {
  const updatedFeedbacks = feedbacks.map((item, i) =>
    i === index ? { ...item, upvote: item.upvote + 1 } : item
  );
  setFeedbacks(updatedFeedbacks);
};

const handleDownvote = (index) => {
  const updatedFeedbacks = feedbacks.map((item, i) =>
    i === index ? { ...item, downvote: item.downvote + 1 } : item
  );
  setFeedbacks(updatedFeedbacks);
};
  return (
    <div className="my-0 mx-auto text-center w-mx-1200">
      <div className="flex wrap justify-content-center mt-30 gap-30">
        {
          feedbacks.length>0?feedbacks.map((item,index)=>
            <div className="pa-10 w-300 card" key={index}>
          <h2>{item.title}</h2>
          <div className="flex my-30 mx-0 justify-content-around">
            <button className="py-10 px-15" data-testid={`upvote-btn-${index}`}
            onClick={()=>{handleUpvote(index)}}
            >
              👍 Upvote
            </button>
            <button className="py-10 px-15 danger" data-testid={`downvote-btn-${index}`}
            onClick={()=>{handleDownvote(index)}}
            >
              👎 Downvote
            </button>
          </div>
          <p className="my-10 mx-0" data-testid={`upvote-count-${index}`}>
            Upvotes: <strong>{item.upvote}</strong>
          </p>
          <p className="my-10 mx-0" data-testid={`downvote-count-${index}`}>
            Downvotes: <strong>{item.downvote}</strong>
          </p>
        </div>
          ):''
        }
      </div>
    </div>
  );
};

export default FeedbackSystem;