I am newer in React JS.
I am using functional based components, I have a popup component(Registration.js) and after filling the form it gets response from REST API. Now, I need to show an another popup component(Alert.js) and update the data into popup according to response.
Related
Based off of https://17.reactjs.org/docs/concurrent-mode-suspense.html it looks like it's best to put fetch requests in the side effect of the event, as opposed to the component itself.
So for example, instead of using useEffect inside a component to fire off a fetch request (let's say on mount "[]"), we place the fetch request directly inside the side effect of the button click event that would cause that component to be shown.
This makes sense for UIs that change on button clicks, but what about for components that are tied directly to the router system? If we add a side effect to an anchor tag that directs users to a page in our app, it works great. But what if the user uses the forward and back capabilities of the browser?
For a project I'm working on we use the AG-Grid with the data loaded from a server.
Users will have the option to upload files and those files will be displayed on the grid immediately after starting the upload (with an uploading status).
The goal is to refresh the grid after an upload is done, so when our React Redux asyncThunk function succeeds. This because that way we update the grid when an uploading status has changed, so that the user does not have to refresh the browser to see the latest updates of his upload.
What is the problem?
We currently use an AG-Grid api reference in our other components to trigger similar AG-Grid actions (such as a reload).
But, we cannot pass that reference through to our React Redux slice, as you cannot have a non-serializable value in there.
Possible solutions?
Is there a way you can pass a reference of the AG-Grid api throug to a React Redux slice to trigger actions in an asyncThunk (https://redux-toolkit.js.org/api/createAsyncThunk)?
Is there a way to use that reference in a file where we export a function that would trigger an action of that AG-Grid api reference? So this could be called in the asyncThunk.
If there is another way this might be possible, please let me know.
Thanks.
When the upload is complete, you can dispatch an action through thunk that adds this information to the redux state (like in the form of state.uploadStatus = 'uploaded'). Access this uploadStatus in the component where you have AG-Grid api reference using useSelector. Then, you can track changes in the uploadStatus in a useEffect hook, and trigger grid refresh acccordingly.
const uploadStatus = useSelector(uploadStatusSelector)
useEffect (()=> {
refreshGrid()
}, [uploadStatus]);
If you are uploading multiple files and need to refresh the grid every time any of those files is uploaded, then set uploadStatus to be an array and push something like fileId into the array when any of those files is uploaded successfully.
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.
I have created react application using redux that is working fine. But now I want to implement SSR. Although I have implemented SSR and that is working but on page load, I want to render that with data but its rendered without data.
How can I render my page with initial data in SSR?
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.