I have an web application in React which have multiple react components used to render different views. For the particular use-case, the back-end vends out an action to UI layer, and for this particular action, the view has to be shown on modal.
The modal has multiple buttons in it on click of which, we have to map to existing react component inside this modal only.
So basically, until unless someone closes the modal, all the further screens on the click on buttons in this should be shown inside the modal.
Application uses React, Redux and Epics. Different URLs are not enabled for the component. I'm relatively new to the react, so don't completely understand the routing concepts.
Question:
How can I model this in a way which provides best user experience, is maintainable and allows me to re-use the existing components.
Approaches I have thought:
Create separate components for each existing one, which wraps the existing component around Modal. For e.g. I have component A, so I create another component AModal, which internally refers to A inside tags.
On each click of button inside original modal, I'll close this background modal and open the corresponding modal component, in the example above AModal.
Concerns: This will lead to hazy experience, as closing and opening of modals will be visible. Also depending upon the modal sizes for each individual components, experience might be even more degraded.
Create WflowContainerComponent which uses all of the original components inside it. So the modal and height/width is defined by the outer component and the view inside it changes as per the requirement and react/redux states.
Concerns: With every added functionality (i.e. button click on original WflowContainerComponent) have to include each individual component in it. And if each of the individual component requires certain inputs from the state, then the props list of WflowContainerComponent will keep on extending beyond control.
Is there a better way wherein, I can just let react know that render each of the next component on the modal only.
I don't know that this might be helpful or not. But what you can do, If all the existing components are connected to redux, Then you can create a Modal Container and pass the other components as children (with props) and remove the animation CSS Just for this component only, So it does not show like glitching.
Related
I'm currently working on a reactjs project, and I've been stuck on a concept for some time.
I have several forms, each managed by a component (Class) and I would like to submit these forms (all together) when I click on a button that is in another component. I use the Reactstrap library for the forms.
I went through this answer, and this one which are similar to mine but none of them fully helped me.
I had to look for several solutions (using parent references) but none satisfied me. To solve my problem, I had to resort to redux. Create a state at the level of redux and connect the parent and the childrens to the store.
So as soon as the parent validates the submission (using a button) in the onClick function , the state (props if we use mapStateToProps) is modified and the components children and parent are re-rendered; and we can use the componentWillReceiveProps function to detect the changing of the props and submit the form.
I have splitted my page into few components and I need to force the other components to refresh their contents on the screen whenever a change happens in one of them.
It is possible to force parent and child components in react js to refresh each other but I wonder how I can handle this scenario when the components are not parent and child .
I know one way is to merge all of them in a single component and handle that but it makes source un-modular.
I have googled this and all the posts are about parent and child components.
Any recommendation would be appreciated.
You should use some form of state management solution, be it redux or the React Context API.
This is the only scalable solution to updating multiple components that are not directly hierarchical.
I'm creating a math quiz app using react-native. I wish to know how to reload all the components, upon clicking the right answer, so that a new question is loaded.
You're looking the wrong way. Reloading all the components will just render the same thing. What you are looking for is more a thing like Redux.
It will allow you to have a state container where all your data live, allowing to store the question number and update it – then components will be rendered to display the new one.
Please take a look at redux documentation, then at react-redux one.
So you would create a dispatch method, e.g. setQuestion(...), which is called when you press a button that will change the question number. The button would be a presentational component.
Then, you would have a component that wrap the whole question screen that will be updated because it was bound with redux store. It is a container component.
See more about presentational and container component here.
If you still want to refresh your app, and don't want a predictive state, you could call app.forceUpdate() where app would be instance of the top component.
I'm fairly new to React, and I was trying to create an app that functioned thusly:
The app consists of several Pages, with multiple Components on each Page.
One of these Components is stats, which can change as the user interacts with Components on the Page.
When a user clicks on a certain Component, they will be taken to a "different" page, which is really just another Page, with different text, data, etc. This is carried out through the browserHistory.push() method. I would like to be able to carry over the changed 'stats' component from one Page to the next, but I am not sure how to do so. Furthermore, since I set the default value for stats in the Page component, it seems that any attempt at passing the changed values into the new Page would result in the new values being overridden. Can anyone help me?
Thanks.
State should live above the level of all components that need access to that state.
Remember that one of the principles of React is "one-way" data flow down the component hierarchy. Essentially, data/state should live at a high level, getting passed down to child components and consumed as needed.
In your case, you have some "stats" data that needs to be displayed across multiple Pages. So, "stats" needs to be owned by a component above all of your Page components - perhaps at the root component of the app itself. Pages themselves would just take the data in and render it, potentially with some callbacks appropriate for editing the data.
Read a bit more about Facebook's philosophy for React in "Thinking in React" in the official docs: https://facebook.github.io/react/docs/thinking-in-react.html#step-4-identify-where-your-state-should-live
One option to consider is to use React Redux to store the state of your application. You would then use mapStateToProps (See Redux API for details) to map the state into props for your stats component.
I am going around React.js and my question is simple: does my app have to be a single page app if I use React?
If no then how do I control components outside of them? By FLUX? Any other standard methods?
If yes then are there any libraries to perform permissions/access validation on the client side for React?
Thanks a lot!
A react application need not be a single page application. React provides you with a way model HTML in terms of classes with specific render logic, but doesn't impose any sort of specific application logic like single vs multi page.
I'm not quite sure I understand the rest of your questions, but I think you are essentially asking how to model a react application as a multi page app. There are many ways, however, one would be to structure your files like so:
./app --> main page for your app
./app/page1/ --> page 1 of your app
./app/page2/ --> page 2 of your app
...
In this way, each 'page' would contain a self contained react project. Your main application page could contain hyperlinks that load these pages, or you could load them asynchronously in your javascript code.
EDIT: The question as clarified in the comment is how does one make a react component change due to some action on the page:
Say react component B is contained within react component A. A user presses button B which is contained in react component B, and when pressed, invokes callback B in react component B, and this click should trigger some action in react component A. callback B should somehow notify react component A that things have changed.
This is where you have some choice about what to do. You could have react component B emit a change that react component A listens for (and re-renders accordingly), or you could use the FLUX model. In the FLUX model, react component B would emit a state change to some state store, which would trigger an event to be emitted. react component A will have needed to set an event callback for this event, and when react component B emits it, react component A can react to it.