Multi step form: make user selection required

[AchimBartscht]

It looks like our questions that are unique and their own components show a strange behaviour. When the user selects an option for the first question, the selection is saved in the state. If now the user clicks the remaining six questions without taking any option (he only clicks the "next"-button several times) it seems like for these six questions the state value of the first question is always used.

The expected behaviour is that the state value of the remaining six questions is null (the state is initialized with null in the question component). PR follows.

We are stuck here. Your help would be appreciated

[NikRoe]

Looking forward to your PR and then I will gladly take a look 👀

[AchimBartscht]

alinarub/dog-app#27

[NikRoe]

Hi there,

if you make the disabled attribute dependent on the selectedValue state, your form should work as intended.
You can get rid of your isChecked state and of the handleChange function as well.

The call of your StyledButton can look like this:

 <StyledButton
          type="button"
          disabled={selectedValue ? false : true}
          onClick={() => {
            handleNextButtonClick(questionData.topic, selectedValue);
            setSelectedValue(null);
          }}
        >
          next
        </StyledButton>

And for your StyledInput you want to change the onChange back to how it was this morning:

onChange={(event) => setSelectedValue(Number(event.target.value))}

The styling of the button looks somewhat counterintuitive, being blue while disabled and grey while enabled, but I am confident that you will find a solution!

Hope this already helps, let me know otherwise ✌️

[gregorsart]

Hi Nick,

ty for the fast reply. We will refactor as you said. But I think it will not solve our problem.
If you take a look at the sandbox of Pete, the same issue we described appears.

For example (Pete's sandbox)
https://codesandbox.io/s/little-brook-48dkvn?file=/src/App.js

1. Select an option for the first question
2. Do not select an option for the second question
3. Klick submit and see the results in the console
4. The second question now has the same value as the first question instead of null

[NikRoe]

I made two changes to the codesandbox and I would claim it works as intended:

https://codesandbox.io/s/dog-forked-multistep-jss3qy?file=/src/App.js

Or am I missing something? 🤔

[AchimBartscht]

Hi Nik, it works now. Thanks a lot!

[NikRoe]

Awesome, glad it works now 🙌