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

|

59 Discussions

|

  • mmhassaan3
     + 0 comments

    💡 The best approach for this task is to use a switch statement. I’ve implemented a solution, and the functionality works as expected — however, I’m still facing an issue with one of the test cases. Any suggestions or insights on how to resolve this test issue would be appreciated!

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

  const handleDownvoteClick = () => {
    if (downvote == 0 && title === "Performance") {
      setDownvote((prev) => prev + 1)
    }
  }
  const handleUpvoteClick = () => {
    switch (title) {
      case "Readability":
        if (upvote == 0) {
          setUpvote((prev) => prev + 1)
        }
        break;
      case "Security":
        setUpvote((prev) => prev + 2)
        break;
      case "Documentation":
        setUpvote((prev) => prev + 3)
        break;
      case "Testing":
        setUpvote(0)
        setDownvote(0)
      default:
        console.log(`Sorry, we are out.`);
    }
  }

  • leonel_arte
     + 0 comments

    I solved it this way:

    import React, { useState } from "react";
const FeedbackItem = ({title, index}) => {
    const [upvote, setUpvote] = useState(0)
    const [downvote, setDownvote] = useState(0)

    const handleUpvote = () => {
      setUpvote(prevUpvote => prevUpvote + 1)
    }
    const handleDownvote = () => {
      setDownvote(prevDownvote => prevDownvote + 1)
    }

    return (
    <div className="pa-10 w-300 card">
          <h2>{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}>
              👍 Upvote
            </button>
            <button className="py-10 px-15 danger" data-testid={`downvote-btn-${index}`} onClick={handleDownvote}>
              👎 Downvote
            </button>
          </div>
          <p className="my-10 mx-0" data-testid={`upvote-count-${index}`}>
            Upvotes: <strong>{upvote}</strong>
          </p>
          <p className="my-10 mx-0" data-testid={`downvote-count-${index}`}>
            Downvotes: <strong>{downvote}</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">
        <FeedbackItem title="Readability" index={0} />
        <FeedbackItem title="Performance" index={1}/>
        <FeedbackItem title="Security" index={2}/>
        <FeedbackItem title="Documentation" index={3}/>
        <FeedbackItem title="Testing" index={4}/>
      </div>
    </div>
  );
};

export default FeedbackSystem;

    I took an advice from another user so I've used an index, that way the test cases pass successfully.

    Probably, the code could be enhanced, but editor is not very friendly I hope it help you.

    It

  • chabber
     + 0 comments

    Why are my submissions "accepted", but it never counts as "solved"? There are major issues with this.

  • mamdyaldeep
     + 0 comments

    i am facing in css issue, let me know how can i solve it

    import React, { useState } from "react";

    const FeedbackSystem = () => { const [items, setItems] = useState([{ name: 'Readability', upvote: 0, downvote: 0, }, { name: 'Performance', upvote: 0, downvote: 0, }, { name: 'Security', upvote: 0, downvote: 0, }, { name: 'Documentation', upvote: 0, downvote: 0, }, { name: 'Testing', upvote: 0, downvote: 0, },]); return (

    <div style={{ alignItems: 'center' }} className="my-0 mx-auto text-centerw-mx-1200">
  {items.map((item, index) => (
    <div className="flex wrap justify-content-center mt-30 gap-30 " >
      <div style={{ display: 'flex', flexDirection: 'row' }}>
        <div className="pa-10 w-300 card" >
          <h2>{item.name}</h2>
          <div className="flex my-30 mx-0 justify-content-around">
            <button className="py-10 px-15" data-testid="upvote-btn-0" onClick={
              () => {
                const updatedItems = items.map((feedback) => {
                  if (feedback.name === item.name) {
                    return { ...feedback, upvote: feedback.upvote + 1 };
                  }
                  return feedback;
                });
                setItems(updatedItems)
              }
            }>
              👍 Upvote
            </button>
            <button className="py-10 px-15 danger" data-testid="downvote-btn-0"
              onClick={
                () => {
                  const updatedItems = items.map((feedback) => {
                    if (feedback.name === item.name) {
                      return { ...feedback, downvote: feedback.downvote + 1 };
                    }
                    return feedback;
                  });
                  setItems(updatedItems)
                }
              }>
              👎 Downvote
            </button>
          </div>
          <p className="my-10 mx-0" data-testid="upvote-count-0" >
            Upvotes: <strong>{item.upvote}</strong>
          </p>
          <p className="my-10 mx-0" data-testid="downvote-count-0"  >
            Downvotes: <strong>{item.downvote}</strong>
          </p>
        </div>
      </div>
    </div>
  ))}
</div>

    ); };

    export default FeedbackSystem;

  • thamaraiselvam52
     + 0 comments
    import React, { useState } from "react";

const FeedbackSystem = () => {
    const [feedbackItems, setFeedBackItems] = useState([
        { id: 1, title: "Readability", upvote_count: 0, downvote_count: 0 },
        { id: 2, title: "Performance", upvote_count: 0, downvote_count: 0 },
        { id: 3, title: "Security", upvote_count: 0, downvote_count: 0 },
        { id: 4, title: "Documentation", upvote_count: 0, downvote_count: 0 },
        { id: 5, title: "Testing", upvote_count: 0, downvote_count: 0 },
    ])

    const handleVote = (count_key, index) => {
        setFeedBackItems(items => {
            const prevCount = items[index][count_key]
            items[index][count_key] = prevCount + 1
            return [...items]
        })
    }

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

I dont't why my test case all failed.



export default FeedbackSystem;