When to use state or is it safe to use state.

[jwall149]

In real application, when I need to disable submit button right after user tap on it, I usually use a state for a Button component indicates button is disable or not. How do I handle this case in Mantra? Have a LocalState to handle it?

Further more, in a UI with several buttons, letting the button itself has state that doesn't effect any other components seems to be OK to me up to now. But Mantra come up with rule of no state in UI, what's is the best approach to solve it?

[solace]

I think the formsy react form package handles something like what you're after. Perhaps take a look at that package and see how they've done it.

https://github.com/christianalfoni/formsy-react https://github.com/twisty/formsy-react-components

[nickredmark]

The formsy practice doesn't align with mantra: they use a mixin that sets/gets values from the component state:

Mixin:

https://github.com/christianalfoni/formsy-react/blob/master/src/Mixin.js

As used in checkbox

https://github.com/twisty/formsy-react-components/blob/9874c779a6d1aea5cea372540327b866c71d1c5b/src/checkbox.js

[jwall149]

@solace, my question is whether to use state for ten buttons (to reduce complexity) or has an array in LocalState for its on/off state (follow mantra philosophy). And all packages you listed use component state, which doesn't align with Mantra philosophy like @nmaro said.

[solace]

Hi,

I only mentioned those packages because at least one of the early mantra demos I saw (not sure if it was this one or not) had used formsy.

Due to lack of clear documentation on this, I've also been uncertain about a compliant implementation, and have just run with what I've seen in the demos, which has been formsy's method, using state.

It would be good to have further guidance on this.

[sandervanhooft]

@jwall149: Trigger the disabled button component state as a prop in the parent component. This will cause the parent component to rerender the disabled button.

@solace:

I only mentioned those packages because at least one of the early mantra demos I saw (not sure if it was this one or not) had used formsy.

In relation to Formsy, perhaps you meant the Mantra kickstarter repo, also see this brief discussion.

[solace]

@sandervanhooft Thanks for that. Good to know for future projects.

[markshust]

You should probably use LocalState, redux or mobx to manage state for your entire app, and 100% avoid setState. I've found mobx to be a great fit once things are mapped through container components, it's actually simpler than setState and you can use the new composeWithMobx composer to rerender on state updates. This lets you create pure/dumb presentational components very easily.