Malaka
Malaka

Reputation: 326

React forwardRef inside a loop

I'm trying to use react forwardRef to call a function inside bunch of child components. Here is the code.

const WorkoutFeedbackForm = ({
  latestGameplaySession,
  activityFeedbacks,
  selectedActivityIndex,
  setIsReady,
}) => {
  const [isLoading, setIsLoading] = useState(false);
  const workoutRef = createRef();
  const refMap = new Map();

  const onSubmitFeedbackClick = useCallback(async () => {
    setIsLoading(true);
    await workoutRef.current.onSubmitFeedback();
    for (let i = 0; i < activityFeedbacks.length; i++) {
      const activityRef = refMap.get(activityFeedbacks[i].sessionID);
      console.log(activityRef);
      if (activityRef && activityRef.current) {
        activityRef.current.onSubmitFeedback();
      }
    }
    setIsLoading(false);
  }, [
    activityFeedbacks,
    refMap,
  ]);

  return (
    <>
      <FeedbackFormContainer
        key={`${latestGameplaySession.id}-form`}
        name="Workout Feedback"
        feedback={latestGameplaySession.coachFeedback}
        isSelected
        gameplaySessionDoc={latestGameplaySession}
        pathArr={[]}
        ref={workoutRef}
      />
      {activityFeedbacks.map((feedback, index) => {
        const activityRef = createRef();
        refMap.set(feedback.sessionID, activityRef);
        return (
          <FeedbackFormContainer
            key={feedback.sessionID}
            name={feedback.name}
            feedback={feedback.coachFeedback}
            isSelected={index === selectedActivityIndex}
            gameplaySessionDoc={latestGameplaySession}
            pathArr={feedback.pathArr}
            setIsReady={setIsReady}
            ref={activityRef}
          />
        );
      })}
      <FeedbackSubmit
        onClick={onSubmitFeedbackClick}
        isLoading={isLoading}
      >
        Save Feedbacks
      </FeedbackSubmit>
    </>
  );
};

The problem is it seems createRef only works for the component outside the loop. Do you have any idea what's wrong here. Or is it not possible to do that?

Upvotes: 1

Views: 265

Answers (0)

Related Questions