I have a react-editor-js instance that allows the user to type in some blog content. My form submission button is up on the header and not on the form body. Therefore I use redux to let those button clicks known in my form.
When the button clicks, the isPublishing value in my redux changes. My form is listening to this component using const p = isPublishing(state=> state.test.isPublishing).
Refreshes are evil in this case, as it resets my EditorJs form data. It'd be amazing if I can listen to the changes without page refreshes. How can I achieve it?
Thanks in advance!
Thanks to #Shyam for the solution.
My assumption that useState and props cause render was correct. There is no direct way to avoid it.
I am using react-editor-js in my project and that's what caused the issue
<EditorJs
instanceRef={()=>{//code to save the reference as state variable}}
enableReInitialize
data={{}}
tools={EDITOR_JS_TOOLS}
/>
The reason for state loss was that my instanceRef was being reassigned every time the component renders.
This reassignment can be prevented by wrapping the method to save the reference as a state variable with useCallback()
Related
I am having an issue where I am trying to pass state on a link but I keep getting undefined when using the state. My Quiz card layout function takes in the details and then links the page when the button is clicked passing the details as the state. Then in my child/link function, I try using the state.
-- I am trying to pass props in my Link by using the state in which I can then refer to my child/linked function to use the information passed on. I am currently learning React (16.2) and any information would be appreciated thank you. I am using functional components as well would there be a better approach? My initial approach is when the user clicks the button it'll link them to a new tab page and display the information from the previous page via the Link. I will post more info if needed.
In my child/link PetLayout function, I tried using the props to see if it contains the state and the useLocation but both are undefined.
In my App js I have the Route
UPDATE: My issue was the target = '_blank' in this case it works now. Why does the target = '_blank' cause this issue where the state is undefined?
#Daniel S _blank is opening in new tab so its another instance of the app, even the app is same but it works differently internally so I would suggest you to use queryString and localStorage.
I have the user select options, these are saved in the state of the parent component. The parent component is the entire web page with the "form".
When the user presses "Submit", I want the child component that uses these options to re-render using these new props passed into it. A default generation is visible when you load the page.
However, I don't want it done before 'Submit' is pressed, only after.
All I can think of is to remove the element from the node and regenerate it but this is not a good way to use React. Let me know if more clarification/context is needed. I am new to React and I am doing this project to familiarize myself with it and it's behaviors.
Thank you!
I suppose what you want is the re-rendering of the child component when the props passed to it(the child component) change. A component re-renders when its state changes, so you can let the child component have its own state, and the state value are initialized(or componentDidMount) by the props. So anytime the props change, state would automatically change and hence the component will re-render after you press the Submit button.
Also if you want the child component to be rendered only after the Submit button has been pressed, you can maintain isVisible in the state and conditionally render it using ternary operator or if__else block
I have a React application. I am on a particular page which has a form. I enter details. If I resize the window to mobile view, the page is getting re-rendered because of which the form is becoming empty. Why?
My guess is that some state variable is getting changed while resizing because of which the page is getting rendered again. So, I removed all the state variables of the page and kept a simple
return (
<H1>Hello!</H1
)
in the render function. And I still see that the page is getting re-rendered. (I checked it on the
useEffect(()=>{
alert('rendered!!!')
},[])
Now, I am not sure if that is the reason why the page is getting re-rendered or something else. Any pointers on why this is happening? If it has to be any state change, how to track which part of the state is getting changed?
I already saw a similar question from someone else here and the answer is pretty clear. Yet, if you're working with in a redux container, the states turn into props through the mapStateToProps function.
How is it then correct to proceed if I want e.g. my text-div to turn into an input, when I click or double-click on it? I don't have any code yet, I'm wondering about the theory.
The components get store state data passed in as props, but they can also have their own state. So in your case, your component would use it's own state to handle the toggling of div to input. If for some reason you wanted it to be saved in the store instead, you would fire off an action to toggle the view and then use the prop from the store in your render method.
I'm working on a project using react with flux architecture.
I have several views and a store called ContextStore in which I save the current view in the state, so that when an action to change the view is triggered this store change his state and the Main view listen and change it.
But the problem is that always when I refresh the page with F5 it always goes to the initial Views.
What is more, if I press the back button the View has no change.
I think that my problem is because when I refresh the Main view loads again the initial state. How could I solve it?
Thanks!
You might want to look into using a router to manage your views. Here's the one I use: https://github.com/rackt/react-router. When you transition to different views (routes) it adds to the history stack so you can use the back button. However, I don't have the use case where you need to stay on the current view when you refresh, so you might need to use cookies or session storage in those instances in any case.
You are right, when hitting F5 you are completely reseting all javascript, ergo the store looses its state. You need to use some kind of storage for saving the state. Classical ways are cookies, or you could use IndexedDB which is included into HTML5