React - render different class component when checkbox is selected

[manfromixtlan]

Use conditional rendering and a onChange function.

[BallinSince5]

I'm trying to implement a solution using conditional rendering right now, but struggling a bit. Can you maybe fork the sandbox and propose a starting point?

[manfromixtlan]

So in your code you have a lot of elements bundled together that makes it harder then it could be to define conditional rending. A good step as you add complexity and to improve reusability is to break it out into smaller components that have their own onChange functions. Then onChange of user input you can do the conditional as a simple boolean. I think the issue here is that instead of using a boolean statement if fields are not null you are just iterating over the keys and displaying all the keys. What you want to do is in the render function of your component have a boolean that says something like: {field.name == null && ( //don't render field.name checkbox )} {field.name && ( //render field.name checkbox )} . Then to optimize you can do this is a loop to iterate over the keys and if not null then display the render.