React - Manage conditionnal rendering with state update - javascript

I'm stuck with a rendering problem. I have a modal form to create/edit an entity (stored in the parent state list), I render a list of "cards" corresponding to each entity in the list. On each card there is a button opening a modal form to edit the entity. The problem is, I can't re-render my form according to the current action (add / edit) and current object.
As the problem is complex to explain, I've reproduced it : https://codesandbox.io/s/myzoo-cbpw8?file=/index.js:2688-2711
Once I've created an entity I'm stuck with the edit form, I cannot re-render a new form. It would imply rendering a new form then set the visibility state to true and that's not working.
Do you have any ideas on how to achieve this ?
If you have any tips or best practice about my codesandbox, let me know !

The problem is that you are trying to manage both editing and adding dialogs with a single visibility variable, so when you open adding dialog, it opens editing dialogs too.
I think maybe it's better to render a single dialog,both for editing and adding, and store in a variable the animal you want to edit after opening the dialog, or storing false/null in case you want to create a new animal.
Link to example

I have made an example here https://codesandbox.io/s/myzoo-forked-7t9em?file=/index.js:177-198. I think the problem was the same state isVisible was managing the 2 forms.
So when you open any of the forms, the component AnimalForm is called with add action then with edit action. We need to have it called in just one case.
So, I just made a small change and have a variable isVisible for each form. This way the forms are opened independently.

Related

React - possible to use the back button in browser in a form

I'm trying to build a dynamic form where the data sent from the server will be rendered by the client. The form will have X amount of steps, decided by the data.
I have my component Form rendering X amount of components Steps.
My problem now is that since it's all the same component, Form, there's not possible for the user to click on the back button to go to the previous step in the Form. I somehow need to keep my URL in sync with my Form/Steps.
What would be the best solution to this problem? Using HashRouter and using Route with "/:id/:step"(how would this work)? Pushing the routes in automatically using useHistory-hook?
The most simplest case as I think is to create parent component with state step and change it when a user go or return to step. Based on step you should render the appropriate step.
A css solution would be to break the form into sections and show 1 section at a time, when some one clicks on the navigation buttons of the form a state update triggers another section to be shown while hidihng the current one. This can be done using CSS transitions, you can look into react-transition-groups to make css transitions with react easier

ViewModel like validation in AngularJs

I'm having some difficulty envisioning a potential solution to a dilemma I'm facing, and I need some creative inspiration.
Essentially, I'm struggling to picture a good way to validate a form that can be thoughts of as having multiple nested forms. The challenge is that these nested forms are only rendered when a line item in the main form is clicked, causing a modal to open, at which time the rendering, model binding, etc. takes place, and the nested form can be validated.
The goal is to know whether or not there are validation errors down inside any of the main form's line items without having to open/render a modal for the item to find out. I'd also like to make sure that there's no duplication of validation logic, and that things are drawing from a single common set of validations rules that can be shared/accessed everywhere needed.
Ideally, I'd like to abstract out the validation logic such that it can be used by any ng-model bound element, but can also be used independent of rendering a form.
If anyone knows of any plug-ins that work well with AngularJs and sound well suited, please let me know.
Clarification
Though I'm open to checking out any plug-ins that might help, that's not really what I'm after. My main objective to is to find a way to validate my nested item data without opening/rendering the item's modal.
I would use something that ensures that the user fills in these forms in a predefined format in the first place.
I use something called inputmask in my angularJs applications.
You can use a regex to define the format you want the inputs to be in.
You can also make sure that all the fields in the modal are in the right format before letting the user close the modal(This validation logic can come from a shared or common component).
Another option would be to make the modals hidden and not removed from the DOM so that the bindings remain even when the modal is no longer visible. You can add a red asterisk or something against the line which opens the modal to indicate errors in that modal's form.

How to populate modal form with a component's state with Reactjs?

I have many child React components that are rendered from a parent Component and upon clicking the name of each one, I'd like to be able to edit the state of the particular component that was clicked, however I am not sure how to best "pass" the current state into the modal so that they can be edited in the form on the modal.
I have seen implementations where the modal fields are set with jquery (.val()) after the click, which does not seem like the idiomatic react way to do this.
How should I prepopulate the modal fields from the particular component and where should the modal be rendered exactly?
Depending on the modal you use, you should simply populate those values using props into a modal component. You can create a more generic modal component and feed this modal your props, or a specific modal if you don't think you could create a generic one that fits more use cases than this specific one. It's hard to give examples of code without seeing/knowing which one you use, but below link of react-bootstrap's implementation of the modal might help you!
React-bootstrap's implementation of the Bootstrap modal.

Ember.JS Best Practice: Model vs Controller field binding

I am looking best practices in Ember.JS to fix the following scenario:
The user clicks on the challenges link.
The system displays the list of challenges.
The user clicks on edit challenge button.
The system displays the edit challenge form.
The user updates the challenge name.
The user clicks on the leagues link without saving the challenge.
The system displays the list of leagues.
The user clicks on the challenges link.
The system displays the list of challenges with the updated challenge name.
This issue is occurring because all my text field are binded directly to the challenge model and since the model is updated as soon as you type it updates the text on all the routes. I have a cancel button on the edit form where I do this.get('model').rollback() on the model to cancel out the edits. However this gets messy if you start doing rollback in different place on the page you can click.
The way I was thinking about fixing this issue is to have the form field binded to the controller properties and on each route copy the model properties to the controller properties on the setupController hook. This would prevent edits to impact the other routes.
I am wondering if this best practice in ember or is there a better way to fix this issue?
Thank you
You can use single rollback in deactivate route hook. Then on cancel action you can do transition only.
// edit challenge route
model(params) {
...
},
deactivate() {
this.modelFor( this.get('routeName')).rollback();
}
PS Are you aware that rollback() still doesn't work properly with relations and reduced to rollbackAttributes() in ED 2.0?
Related links:
https://github.com/emberjs/data/issues/2122
https://github.com/emberjs/data/issues/3273#issuecomment-110965145

Same modal for creating and updating records on Angular (angular + bootstrap)

I have a modal that creates objects on a simple CRUD.
I wanted to reuse the same modal to Edit/Update records since the form is the same.
I have a ng-repeat directive to lay out the different object on bootstrap panels.
The problem is that when I click edit, the form gains the scope of the current object to edit but when I exit the form and click Add New, the same modal pops up with the scope of the previous object.
If I try to $scope.object = '', the two way data binding kicks in and it updates my model and resets the object values.
How can I reset the scope without resetting the object I previously edited?
Thanks
Thank you, the answer was creating instances of the modal everytime I want to add or edit a request.

Categories