Get Form data in a State and from there into the URLSearchParams()

[gregorsart]

We have problems to get our State object multiStepFormData transferred into our URLSearchParams().
If the SearchParams work, the whole Quiz works again.

Help very welcome ...

  const [currentStepIndex, setCurrentStepIndex] = useState(1);
  const [questions, setQuestions] = useState(questionsData);
  const [multiStepFormData, setMultiStepFormData] = useState(null);

  const router = useRouter();
  // Form Submission for one question at a time
  function onSubmit(event) {
    event.preventDefault();
    const formData = new FormData(event.target);
    const data = Object.fromEntries(formData);

    setMultiStepFormData((questions) => {
      for (let property in data) {
        return { ...questions, characteristic: property, value: data.barking };
      }
    });

    console.log("data", data);
  }

  useEffect(() => {
    const params = new URLSearchParams(
      `${multiStepFormData.characteristic}=${multiStepFormData.value}`
    );
    console.log("multi step", multiStepFormData);
    if (multiStepFormData) router.push(`/quiz-results?${params}`);
  }, [multiStepFormData]);

  return (
    <>
      <StyledForm onSubmit={onSubmit}>
        {currentQuestion.map((questionItem) => {
          const { id, question, answers } = questionItem;
          return (
            <StyledFieldset key={id}>
              <StyledLegend>{question}</StyledLegend>
              {answers.map((answerItem) => {
                const { id, name, value } = answerItem;
                return (
                  <>
                    <StyledInput
                      type="radio"
                      id={id}
                      name={name}
                      value={value}
                    />
                    <StyledLabel htmlFor={id}>{answerItem.answer}</StyledLabel>
                  </>
                );
              })}
            </StyledFieldset>
          );
        })}
        <LinkButton>next</LinkButton>
      </StyledForm>
      <StyledNavigation>
        <StyledButton type="button" onClick={previousQuestion}>
          previous
        </StyledButton>
      </StyledNavigation>
    </>
}

[NikRoe]

Hi Gregor, can you send a PR to the current state of the App?

Thanks in advance :)

[gregorsart]

Here is the PR, ty in advance.

PS: We now have the approach to bypass the URLSearchParams() and write our Query directly in the router.push

PR to current state of work

[onemanwenttomow]

Thanks for the link to the PR.

So it seems like the ultimate goal is to create a string (url) like the following

/quiz-results?barking=2&energy=2&trainability=4&good_with_children=2&good_with_other_dogs=2&protectiveness=2&shedding=2

To get there you were taking an object structured like so

{
  barking: 2,
  energy: 2,
  trainability: 4,
  good_with_children: 2,
  good_with_other_dogs: 2,
  protectiveness: 2,
  shedding: 2,
};

And converting it into a string via the URLSearchParams

e.g.

const params = new URLSearchParams(data);
`/quiz-results?${params}` // data being the object shown above

On possible solution to solve this challenge with a multi step for would be to start with an empty object in state.

e.g.

const [formResults, setFormResults] = useState({})

Then, every time someone clicks the next button, we can read the value of the input field currently on display and add it to the object.

e.g.

function handleNextButtonClick(topic, value) {
  // we can also increase the step count
  setStep(step + 1);
 // here we spread the old object, and then add a dynamic key and value. e.g. { barking: 3}
  setFormResults((oldFormResults) => ({ ...oldFormResults, [topic]: value }));
}

That means when it is time to submit the form you can take the value of formResults and pass it to URLSearchParams

function handleSubmit(event) {
  event.preventDefault();
  console.log("formResults to give to URLSearchParams", formResults);
}

I have put together a quick sandbox demo for you. We can also talk about this "in person" next week.