I am trying to render other component when successfully submit form. Form has different rails layout and after form submit it redirect with different layout.
Render component using react-router and redirect object but how can I render it with layout. Also I want display flash message after form submit with react. So if reload the page after submit form it is not possible to set flash message in react component.
Any suggestion?
Thank you.
try this maybe it's helpful
https://github.com/reactjs/react-rails/issues/901
If you want to write the layout by using React Component, you should render your contents in the layout component. In this case, all props should be passed to the Layout component at first and then you can pass some props to the child components
Related
Problem Image
Problem Statement
I have a situation like in image I have a layout with 'Save all' Button, this layout component has many component (direct or deep in hierarchy). All component has a method to save its local state data to server and each component has different form component.
What is best pattern with react redux to call save of each component on click of save all, and is there a way to disable save all if no component has any change ?
Looking for help in React/ Redux scenario , is there some pattern like Command Pattern to handle these scenarios ?
Im creating a popup that will be shown to the user after login. He should select an option that will be shared in all components as prop. Everytime this popup is open and the value change, all the component should be updated. Do you have any tips on how I should do it. Thanks
The best way would be using redux or context to have global state that can be shared with all of your components. I do not know your app volume and component numbers but if you are looking for a basic way for basic app, you can set this popup states in parent component of your app and pass this state as props to your children components. Another way would be implementing this with backend that you can do post request each time when you change your popup data and do get request in your children components
I am using a lot of components combine together to make a UI of the website. As a newbie, I am not sure how can I change the css/style of the component when a new component renders. For example a component lets say SearchBar is on the component as the image below.
The SearchBar css makes it at the center of the page.
But when I click on the search button and the next component renders I want to change the css and take it to the top. Is this even doable?
I have built a form using react json schema form in my react app. And my code already has a customized reusable button component. Trying to use the same button component inside the form, however I am unable to get the edited form data. Is there a way a get the latest formdata
You can use form-context. which is passed to all the custom widgets.
Read more about it here
You can maintain a state of your form data, update the state with onChange and you can access your latest form data from your component's state.
React Router can load routes asynchronously via getComponent or getComponents and it is ok. But if user has slow internet connection i should show some page with loader and some text message like 'Please wait component is loading' and so on. How to configure that using getComponent?
Instead of getComponent, you should use component and provide it a component that shows a loading message by default, but once it has loaded a component it shows that component instead.
You can reference this github gist for an example. It was written for React Router v4, but the idea is the same. Instead of rendering null you would reference the spinner, loader message, etc.