Render steps conditionally with a ternary

[erikmellum]

First of all - thank you for the library. The demo on the readme showcases a lot of useful features. I was able to drop this into my app and get it all working with minimal effort. I did run into one hiccup in my use case that I thought someone may know about.

I noticed this similar issue, but didn't find a clear resolution: https://github.com/americanexpress/react-albus/issues/35

It seems reasonable that I would be able to do the following:

Step id="category">
                                <h1 className="text-align-center">I'm interested in...</h1>
                                <RadioGroup name="category" selectedValue={category} onChange={setCategory}>
                                  <div><Radio value="repair" />Computer, Printer, Internet Service</div>
                                  <div><Radio value="development" />Software / Website Design</div>
                                  <div><Radio value="subscription" />Service Contract</div>
                                  <div><Radio value="appointment" />Onsite Appointment</div>
                                </RadioGroup>
                              </Step>
                              { category === 'repair' ? <Step id="repair">
                                <RadioGroup name="category" selectedValue={repair} onChange={setRepair}>
                                  <div><Radio value="investigation" />Investigation</div>
                                  <div><Radio value="virus" />Virus Removal</div>
                                  <div><Radio value="internet" />Internet</div>
                                  <div><Radio value="printer" />Printer</div>
                                  <div><Radio value="data" />Data</div>
                                </RadioGroup>
                              </Step>
                              : '' }
                              { category === 'development' ? <Step id="development">
                                <RadioGroup name="category" selectedValue={development} onChange={setDevelopment}>
                                  <div><Radio value="website" />Website</div>
                                  <div><Radio value="desktop" />Desktop Application</div>
                                  <div><Radio value="mobile" />Mobile App</div>
                                </RadioGroup>
                              </Step>
                              : '' }
                              { category === 'subscription' ? <Step id="subscription">
                                <RadioGroup name="subscription" selectedValue={development} onChange={setDevelopment}>
                                  <div><Radio value="device" />Device Maintenance</div>
                                  <div><Radio value="hosting" />Web Hosting</div>
                                  <div><Radio value="oncall" />On Call</div>
                                </RadioGroup>
                              </Step>
                              : '' }

Are there any recommendations on how to handle this functionality? I want my wizard to react to decisions from previous steps, it's a must have for my use case and also just making the code easy to maintain. I discovered the library tonight so I'm not familiar with implementation details. Hoping someone can shed some light on this use case. Thanks!

[ryhinchey]

@erikmellum this is your best bet right now but we're working on fixing this for a v3 release.

https://github.com/americanexpress/react-albus/issues/35#issuecomment-564408810

[erikmellum]

Thank you @ryhinchey, I can work with that for now! Excited to see that upcoming v3 release. Thanks again for the project.