Unhandled Runtime Error Error: [Immer] Immer forbids circular references

Viewed 54
const handleMultiChange = (event, id, index, questionId) => {
    const target = event.target;
    let newFormValues = [...multiOptions];
    const data = newFormValues.find((x) => x.id === id);
    data.label = target.value;
    newFormValues[index][id] = data;
    console.log(newFormValues);
    setMultiOptions(newFormValues);


    const next = produce(survey.questions, (draft) => {
      const question = draft.find((question) => question.qid === questionId);
      question["multiChoiceOptions"] = newFormValues;
    });
    dispatch({ type: "SET_QUESTIONS", value: next });
  };

My handleMultiChange is inside a textbox loop

{questionType && questionType === surveyTypes.MULTIPLE_CHOICE && (
            <RadioGroup>
              {multiOptions &&
                multiOptions.map((option, index) => (
                  <MultiChoiceRadio
                    deleteMultiChoice={() =>
                      deleteMultiChoice(id + "question" + index)
                    }
                    addMultiChoice={() =>
                      addMultiChoice(
                        id + "question" + (index + 1),
                        index,
                        option.id
                      )
                    }
                    id={option.id}
                    index={index}
                    label={option.label}
                    name={option.name}
                    questionId={id}
                    isLast={multiOptions.length === index + 1}
                    handleChange={handleMultiChange}
                  />
                ))}
            </RadioGroup>
          )}

How do i handle above for redux

0 Answers
Related