I have three components:
Main (Containing a table component and a button)
Modal component
Form component
The workflow goes like this: A button in main "New X" calls the Modal which opens up with the Form component inside it.
In the above, I have kept the form input as a state of Form (To be able to validate etc.)
Now, I need a new workflow: A double click in the table in Main should open the modal and the form but with the row data entered in the form (To be able to edit the data)
To reuse as much code as possible I wanted to use the same Modal/Form components but pass the row data as props through Modal into component.
As for now, the row data is a state of Main, passed as props to Modal and finally passed as props to Form which then sets it to state.
My question is: Is that the correct way to handle it? In theory I could then have two components having a different state of the data.
Yes, it seems the correct way to handle it. React developer's team recommend to keep the state lifted up as much as possible.
For sure you can handle it in different ways but you'll end quite always to lift the state as up as you can.
Is that the correct way to handle it?
Yes.
In theory I could then have two components having a different state of the data.
No, not really. The Form is the only one that manages the state.
Related
I have an add contact Modal and an add company Modal. When the user wants to add a contact they click the corresponding button which opens said Modal. Typically, they would fill out the information needed on this form. One of them being a Company they belong to. If the company does not exist in the system, they then have an add company button which when pressed opens another Modal on top of the contact one.
Again, the user enters the information for the company and once done, would tap save. This would then trigger a fetch which POSTS the information to my Spring Boot backend which in turn sends back a JSON object version of the company which has come from the database.
I then check it and if it comes back valid, it sets out an alert telling the user it was successful and closes the company Modal.
At this point, the user should be able to type the company name into the contact company autocomplete and find the company they've added.
However, at this point, that is not happening. The re-fetch is not triggered at all despite me thinking that when the Contact Modal is re-rendered it would trigger the re-fetch.
I've tried clearing the contactList within the return() function but this causes a Too many re-renders error.
My question is, how would I trigger a re-fetch from within the contact list once it has returned from the company modal?
My initial thought would be to not have more than one modal open at the same time. Feel free to disagree but that doesn't seem like that's how modals are intended to work. As an alternative, you could have an "Other" option and have a set of text fields conditionally appear. Upon completing the form, have a boolean variable (or however you want to do it) be passed into your backend that kicks of the business logic that creates a new company before adding the contact. Or add all that logic to your add contact SQL procedure to avoid making (a risky) two db calls for one action.
Refetch Problem
Without looking at your code, it's possible that if you're using the useEffect hook, you aren't passing any dependencies to "listen" for certain variables that have been changed. After the data comes back from that POST call, you should add code that updates the array populating the select company dropdown field (eg .then() callback)--assuming it is a dropdown and an array. This change in state should re-render the component but, for a better user experience, you may want to do it in a way that it doesn't blank out the rest of your fields.
You are probably using useEffect which makes the loop.
Try to connect refetch with an event - click or submit, within try/catch - via 2 way binding eventHandler prop that calls praticular function.
Also you can change the state, and refectch the results after the new loading of the page. Hope it helps, even as a hint!
I'm a Junior Developer and I'm currently having a big issue with breadcrumbs.
For this application, I'm using VueJS and the problem I'm having is the following:
*The user clicks on 'tables' and is sent to the 'tables' page.
-On that 'tables' page, he has a big table in which he's able to click on the various columns to show a new table with data relevant to the column he clicked on.
*For this I'm on the same component so I'm not using routers, but using v-show as I don't want the tables to rerender.
My problem is the following, I have to make a breadcrumbs as he navigates to the different tables (ie: table/holdingList/entrepriseList/clientList..). and they have to be clickable so that I'm able to create a function that injects data into the table or to simply 'show' it and close the others.
Can anyone give me a brief out-line of how to do this? Sorry if it seems trivial. I've already spent a couple of days on it and my brain has turned to mush...
I will start from the easiest solution to implement:
Each v-show will depend on a different data object. Then your breadcrumb has an #click method that will set every v-show data object to false. Give the method a parameter with the name of the data object that you intend to show and display that to true.
The previous answer is enough to get it working. Other ways of achieving the same result in a more maintainable way are:
Create one data object named as activeTable and turn your v-show into a v-if. When you click on the breadcrumb element you change the activeTable data object to an identifier for the table you wish to display. After that your vue-if simply checks if the activeTable === thisTableId. Where thisTableId is the identifier of each table.
You may want to start getting acquainted with Vuex specially if your tables share a similar layout. In that way you will store the data and there is no need to request your data again. This is useful if the data to populate your tables come from an API.
Finally on an SPA architecture there is no actual re-render so you may possibly want to look at that as well.
Please read the guidelines for posting an answer since they require you to show at least some effort from your side. Good Luck!
I have designed a app using mithriljs(0.2.5) with components and Observer pattern for inter-component communication. However I do have a requirement of blocking an action of component based on another one.
Say, I have 2 components ItemList & ItemDetail. When an Item is selected in the list component an ITEM_SELECTED event is fired that causes the detail to be loaded. Detail component allows user details to be edited and saved.
If the details are dirty(edited not saved) and user tries to do an selection, I want to show a Save Item screen with Yes/No/Cancel option. Based on the option selected either load new details or cancel and go back to previous selection.
Selection component has no knowledge of dirtiness of the details, Detail component will render the Save Confirmation.
One option for the Detail component to fire a REVERT_SELECTION message if cancel is selected, ideal pattern would be to block the Item selection completion till Detail components gives a go/no go response, seems I need something other than observer, which is blocking.
Thanks
I suppose the best solution would be to use a Modal Dialog that will block all the GUI unti a selection on Yes/No/Cancel is done.
Im mithril 0.2.5 you varios approact available for modals.
Please take a look to this samples
I got one main component for the FORM and have three component for sections
Now in the main form i have submit button which i want to use to submit all the section(s) data to a service?
How can i achieve this?
Do i use output event emitter in all the section components and get the data in the main form component before submitting?
Thank you
---------------------- initial question below ------------------------
I am creating a Form (with multiple sections) in angular2 and this form will be part of a approval workflow.
The workflow will be not in angular2, although the form will be referenced from the workflow. When we open the form from different stages of the workflow it will allow user to view or edit only certain sections of the form.
How should i design my form with sections?
1) one component for the entire form?
2) separate component for each sections and having one main parent component?
on the form load; run business logic check to find what section needs to be rendered in view and edit mode AND for business logic have a separate component which will check what section is loaded and in what mode
Please suggest an application design.
The key thought here is re-usability and business logic.
Extract reusable components as their own component.
Lets say I have these components in my app ...
Child Component A - some form inputs that i will reuse elsewhere
Child Component B - Some form stuff that I will reuse
Parent Component A ...
Child Component A
And some stuff i wont reuse
Parent Component B ...
Child Component A
Child Component B
And some different stuff
Route Component, renders parent A or B depending on business logic as determined by incoming params / data.
Also, you might want to use attribute directives to add functionality to form elements. e.g. an attribute directive that transforms an input into a datepicker.
Assume I have a shiny new React component for rendering markdown and ye old legacy static HTML form, where user types text into textarea
Now I want to enhance this form a little: I want to display my React component alongside and render markdown as user types.
So, basically, I need to set component's props from HTML.
Next thing
Assume I have a React component that displays set of pics and lets user to click and mark one as active. It draws a fancy blue border around the active image and everyone are happy.
Now I have ye old HTML form and I want to send selected picture's id to my server.
So, basically, I need to read component's props (or state) and put it in the hidden field of the form
How do I achieve this? I also might have multiple separate components on my page