How can I render with useEffect?

Question

Well, I want to make a feedback section, in which the system asks if the post helped the user and the user can vote to "Yes, it helped me!" or "No, it didn't help me". If his vote goes to "No, it didn't help me", he must specify the reason why it didn't help and send it. If he just vote to "Yes, it helped me!" the section will show a "Thanks for your feedback" message. The same happens after he sends the reason of the "no" vote.

So, to get the user's vote and decide what have to be shown, I first created a context

 export const FeedbackContext = createContext({});

export function FeedbackContextProvider({ children }) {
//at this point the section is waiting for a click in one of the two options 
  const [feedbackResult, setFeedbackResult] = useState("waiting for feedback");

  return (
    <FeedbackContext.Provider value={{ feedbackResult, setFeedbackResult }}>
      {children}
    </FeedbackContext.Provider>
  );
}

Then I use it in the Feedback view, which is the container that'll show different messages based on the user's feedback

export default function Feedback() {
  const { feedbackResult } = useContext(FeedbackContext);

  return (
    <Animation.Bounce in={true}>
      <section>
        <FeedbackContextProvider>
          {feedbackResult === "waiting for feedback" ||
            (feedbackResult === undefined && <FeedbackClickOnThumbs />)}

          {feedbackResult === "thumbs-up" && <FeedbackThanksMsg />}

          {feedbackResult === "thumbs-down" && <FeedbackUserInputsMsg />}
        </FeedbackContextProvider>
      </section>
    </Animation.Bounce>
  );
}

Inside the FeedbackClickOnThumbs and the FeedbackUserInputsMsg, I use the setFeedbackResult to change the feedbackResult state and then change what's shown in the Feedback view.

The question is that I'm actually stuck in this view, because it's not rendering the other component when the state changes, I've tried using useEffect as shown above

 export default function Feedback() {
  const { feedbackResult } = useContext(FeedbackContext);

  return (
    <Animation.Bounce in={true}>
      <section>
        <FeedbackContextProvider>
          {useEffect(() => {
            if (
              feedbackResult === "waiting for feedback" ||
              feedbackResult === undefined
            ) 
            {
              return <FeedbackClickOnThumbs />;
            } 
            else if (feedbackResult === "thumbs-up") 
            {
              return <FeedbackThanksMsg />;
            } 
            else 
            {
              <FeedbackUserInputsMsg />;
            }
          })}
        </FeedbackContextProvider>
      </section>
    </Animation.Bounce>
  );
}

But it also didn't work... Am I using useEffect in the wrong way? Should I do something different in my context?

Answer 1

UseEffect never call on return. Just use if inside like this:

const rederBody = () => {
  if (
    feedbackResult === "waiting for feedback" ||
    feedbackResult === undefined
  ) {
    return <FeedbackClickOnThumbs />;
  } else if (feedbackResult === "thumbs-up") {
    return <FeedbackThanksMsg />;
  } else {
    <FeedbackUserInputsMsg />;
  }
};

...

<FeedbackContextProvider>
  {rederBody()}
</FeedbackContextProvider>