Conditional example

[kaihendry]

Description

Carrying on from #151

I need to express if "needG" show "gschema" example.

Steps to Reproduce

1. https://jsfiddle.net/kaihendry/9cgj23e7/4/
2. fill in name, select true, and fill in another name
3. click submit and be somewhat surprised data from earlier formData is there on the console.log "All done" finalSubmit

I just want to check with you that I have done this the "right way". Since I really don't understand how a custom Field would look like.

[n1k0]

So for conditional fields you should really read on this thread, where we discussed a strategy to rerender a form against a new schema computed against its updated formData.

It seems it worked for @mplis-jetsetter, maybe (s)he could share a snippet?

[kaihendry]

Thanks, I rewrote my example to https://jsfiddle.net/kaihendry/7fb0vyzx/ following your suggestion.

It's a few lines less & I think it makes sense. wdyt?

[n1k0]

Looks good! I'd probably avoid mutating the schema, passing a clone, but otherwise works great anyway :)

Can I close the issue?

[kaihendry]

There is a problem I can't quite figure out as yet. How to reset the schema once false is selected after true. https://jsfiddle.net/kaihendry/7fb0vyzx/4/

[n1k0]

That's why I suggested to keep the original schema around and avoid mutating it. Basically when false is selected again, you should revert to your original schema value (eg. in an else statement). Does this make sense?

[kaihendry]

Yes, I am trying to do this. I'm only mutating conditionalSchema when the condition is activated.

[n1k0]

I'm gonna try updating your gist and see how it goes.

[n1k0]

Here's a working example leveraging es7 object properties spread operator: https://jsfiddle.net/ap932fus/2/

[kaihendry]

I don't quite understand why a spread operator was required. Why was the schema not being updated in my fiddle? https://jsfiddle.net/kaihendry/7fb0vyzx/4/

[n1k0]

Object.assign isn't recursive, so you were still carrying nested object references around, which were mutated in the original source object as well.

[n1k0]

If you plan on dealing with immutability a lot, you should look at Immutable.js which offers a nice API for handling immutable structures. But the spread operator route is nice too.

[n1k0]

May I close the issue now?

[kaihendry]

You can close the issue, but I am still a bit confused how var conditionalSchema = sschema; isn't an independent clone, instead of a reference. Maybe I'm showing up my mediocre Javascript skills! 😆

I'm a little worried that maintaining the schema will be very tricky when there is several conditional paths.

[n1k0]

I'm a little worried that maintaining the schema will be very tricky when there is several conditional paths.

This is really matter of finding a good architecture and code organisation, where atomic idempotent functions and a good understanding of how js mutability works are key. I'm closing this issue.

[n1k0]

Oh, and as a last tip, you might be interested in using redux to maintain your form state; it provides convenient helpers to update state along a good code layout so state handling code scales better.

[kaihendry]

Thank you I will look into Redux. One more thing I don't quite understand is how on Line 43, the formData of at least "name" is passed without explicitly saying so: https://jsfiddle.net/kaihendry/9cgj23e7/6/

Maybe this is some artefact of React, but I expected the two Form elements to be isolated.

[mplis-jetsetter]

@kaihendry I don't have an answer for your most recent question, though I can suggest that you try following through this function which is called from here. That might explain why the Form is using old formData but I'm not 100% sure. However, I can give you a bit of advice that will hopefully allow you to avoid some of the issues I've run into while trying to solve a similar problem to the one you're working on here.

I'm using Reflux to store the schema, uiSchema, and formData that I use to render the form. When I want to make a change to the form, I update the store, which triggers a re-rendering. My advice is to avoid mutating data as much as possible - always work with a new copy. I ran into an issue where I was mutating the ui:order array in the uiSchema inside of my store, which happened to be a reference to the same uiSchema object that I had already passed to the Form. Inside of the Form, it checks whether its props or state have changed from the previous render, and if they haven't, it doesn't re-render. Since I was mutating the same object in the store that the Form was referencing, it wasn't detecting any changes. Moral of the story: mutability is bad...and also, Object.assign doesn't create a deep copy. Right now, I'm using JSON.parse and JSON.stringify to create a deep copy, though if you want to go that route, I'd suggest you check the answers in this thread to make sure you won't run into any issues.

[n1k0]

Moral of the story: mutability is bad

This pretty much sums it up :) Be careful with JSON serialization/deserialization as it can get quickly quite expensive.