Saving data in from when navigating using react routers - javascript

I’m trying to create multiple pages with forms. When I navigate from one page to another, I want the data that was filled by the user to be saved automatically (lets says, in the state of that component). Note the user has not submitted anything yet, nor there is any save button to fire any function.
The user has simply jumped from one page with form components(eg: ) to another page with other form components using react routers... And I want whatever the user entered saved automatically.
Can that be done? When the user goes back to the previous page, the user can pick up where he left off?
So in this example, when the user goes back to the previous page(using react routers) the component did not reset or refresh itself, and whatever was entered; the user would not have to enter again, hence picking up where he left off. There were talk about using iframes, but I'm not sure about that.
Of course all this eventually will go to the redux store. But I’m trying to solve the “saved” state of these form even after navigating to other components/pages using react routers

For that, you can take a look at redux.
If you don't want to use redux i will link my answer that uses react-router =>
With react-router, you can transfer "state"
this.props.history.push({
pathname: '/ShowRecommendation',
state: { taskid: Task_id }
})
and at the ShowRecommendation.js componenet you can get the value using
console.log(this.props.location.state)
can we pass a value when we move to next component using this.props.history.push("/next Component")?

Related

Correct way to go about updating a shared Redux state in React

I have a web page in a react app where I enter text into two separate text boxes that will update the backend with the text entered. The update occurs after a short time where the user no longer types to avoid spamming the server. Once a server update goes out, I update the state with the information that came from the server. This, of course, causes that part to re-render. This works great until a user enters something inside one box and then enters information into the second box before the otther box's update has gone off. The information in the second box is lost and overwritten by the update coming from the server.
It's important to note that the textbox itself stores the state of the text, and only when an action/dispatch cycle is called after the timeout does the redux state update. I tried tieing the textbox text state to redux, but the performance took a hit, and there was noticeable lag when typing.
Currently, I have each text box being passed a prop that maps to a value in from the redux state. These text boxes have different values mapped to them, but they are from the same state.
I don't really know the best way to approach this such that the textboxes store their values after being fetched from the server and still will not lose text when the other is updated.
In the component that renders the page:
render() {
//... other code
return (
/*... some jsx ...*/
<DetailTextArea className="textArea" detailType="implementation" text={practiceInView.implementation_details}/>
/*... more jsx ... */
<DetailTextArea className="textArea" detailType="evidence" text={practiceInView.evidence_details}/>
);
}

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

How to store form data In temporarily react js?

I have a registration form, I'm filling some form elements. Meanwhile if I click term and condition link. It'll redirect to that page. After come back same register page, there is all fields are empty. Again I start to fill up form from scratch.
So I need whatever I fill up as auto fill in form elements. That means my state values updated. How to possible in React JS?
There are multiple approaches to this problem.
Pass data to the new navigated page, and on completion of the action, you can pass back data to the registration form and have your form populated.
Store all data in a state, and update state on each form input entry. So, once all entries are made your state is updated with all values. The only constraint here is that, the DOM node shouldn't go out of scope or shouldn't disappear from the DOM tree.
Use redux to store all form values
I myself am not familiar with React, but this seems like a great tutorial on how to handle form in the ReactJS. His form seems to remember the previous input even after reload, also he generates the form dynamically, and he provides nice JSFiddle code on Fiddle code:this link.
Hope this has what you are looking for.

Ionic-1 Navigation

I am working on an Ionic-1 App. I am terrible confused in managing the back history of my app. Consider this scenario:
Start from home page then
Does a 3 step user registration process
After the end of user registration redirect to records page
Now clicking back button (hard or soft back) I want to navigate back to home instead of cycling through user registration process. There are other scenarios like this where back behavior needs to be modified. Are there any references around to implement back behavior systematically? Should I manually define view hierarchy tree structure and somehow figure out where in tree current view is and then go to parent?
As per my suggestion you should pass parameter say 'extraparams' in your url and set it value to 'home'.And on record page controller then make a function on back button say 'goBack()' where you can check if value of 'extraparams' is 'home' and then use $state.go() to navigate to home view.
If you can keep and maintain each and every section using state approach then you can redirect to home page or what ever the page you prefer to redirect to.In that way you have to implement back button like this way, $state.go('homeSate');
or if you can keep 3 steps(registration) as sub states and have try by injecting $rootScope to your controller in which allows you to access your parent(home).

How to restore previous state of angular controllers

I need to keep controllers' state in angular ,for improving some user experiences, during user is visiting different pages.
For instance I have a list, which is created via a directive, and it has a pagination section, so imagine when a user go to page 20 and choose an item, they'll be redirected to the detail page, but when they click back button and return to the previous page they see the first page of the list which is not convenient and they expect to be on page 20 again.
I've come up with several options:
Using a dialog to display second page (item detail), so they can close that modal and return to the previous form without any change.
Redirecting users to the second page with a parameter in URL and then return them with that parameter to understand what page number they have been before.
Keeping some crucial variable globally to store controller state and using them when user comes back.
But I think there should be better ideas like keeping controllers' state during redirection.
Any idea would be appreciated.
Redirecting users to the second page with a parameter in URL and then return them with that parameter to understand what page number they have been before.
I prefer this because you get the added benefit of staying on page 20 when you do a page refresh. Options 1 and 3 do not give you this added benefit. Path params are also bookmark friendly.
Another alternative for you to look into that is almost as good is localstorage
or cookies. I dont think these options are better than your 2 though.

Categories