I've created a small quiz application. At mount, there's a state which is true. Meaning a video component will render. The HTML-attribute (video) itself has a onEnded-attribute attached to it. The attribute is supposed to change the state to false (onEnded={() => setState(false)}), meaning the quiz component will render.
However, as soon as the video has ended. Nothing happens! On my OnePlus, Windows 10-PC and another Android-device, everything works as expected. But when I use an iOS-device (Tested both Chrome and Safari), nothing happens when the video has ended.
Any ideas to why this might happen? The video itself is a video using Screen9's Amber Player API. Haven't tried with another video-provider yet to see if the problem lies there.
Related
Live example https://snack.expo.dev/su1-U5DZc
If I swipe screens with buttons - everything okay, but if I swipe with gesture - screens shows twice. Why so? Does this setWtf(state.index);
const onTouchStart = (e, state, context) => {
console.log('onTouchStart: ' + state.index);
setWtf(state.index);
};
make index stored somewhere by reference and then get updated?
Yes it was due to setWtf(state.index);. There is a reported bug of render issue when updating state in their official git page.
They are saying to downgrade react-native-swiper to version 1.5.5
or you could follow other solutions mentioned here : Update the state breaks the slides
Without more information, it's impossible to pinpoint the exact cause of the problem you're experiencing, although it's conceivable that the problem is connected to the way your code handles touch events.
Your code is probably adjusting the value of state.index depending on the gesture when you swipe between screens, and then refreshing the screen display based on the value of state.index. The screen display may update twice if state.index is being updated by reference because the value is being modified twice: once by the gesture and once by the setWtf function.
Using a different variable to hold the current screen index and only updating the value of state.index when the user interacts with the buttons is one potential fix for this problem. This should prevent the screen from being displayed more than once and ensure that the value of state.index is only modified once.
It's important to keep in mind that the setWtf function you specified in your query could not be connected to the problem you're having. Without more information, it's difficult to say for sure whether this function is being used to update another state in your application.
I am trying to create a calculator app using React JS. Even though the app is almost complete, I have one small bug. When the clear button is clicked, the numbers on screen becomes 0 but then after if any number key is pressed, the previous number reappears. Here is the code snippet of my app. I guess the bug is present in Display.js file or App.js file.
How to fix this bug?
Thanks in advance!!!
According to your codepen, you need to reset "value" inside of "NumberPad" component.
I've used a useEffect to check if "value" in app.js is set to 0, if so, it sets the "value" in "NumberPad" component as "0".
For your reference:
https://codesandbox.io/s/runtime-wildflower-zt0rv?file=/src/Components/NumberPad.js
The problem is, in NumberPad.js, the handleNumberClick function calls the number function with its own state.
Your clear button has no link to the state saved in the NumberPad
What you can do is lift the state up to App.js so you have only one source of truth for the display to show
I am trying to hide an element 'GorillaSurfIn' after I click on it.
But also it should fire the 'setShouldGorillaSurfOut' to 'true'. The second part works, but after I added this function:
function hideGorillaSurfIn() {
let element = document.getElementById('gorilla-surf-in');
ReactDOM.findDOMNode(element).style.display =
this.state.isClicked ? 'grid' : 'none';
}
After I click, the code falls apart.
Once I click, the element should be hidden/removed till the next time the App restarts.
Here is the Code Sandbox Link for further explanation.
I am open to any solutions, but also explanations please, as I am still fresh in learning React.
I have changed your code a bit to make it work. You can make further changes according to your need. A few things that I would like to add: -
You should avoid using findDOMNode (in most cases refs can solve your problem) as there are certain drawbacks associated with findDOMNode, such as the react's documentation states "findDOMNode cannot be used with functional components".
I've used refs (forward ref in this case) to make it work.
GorillaSurfIn was called twice, so there were two Gorilla gifs on the screen with same IDs. Not sure if that was the intended behaviour but each element should have unique ID.
Check out the code sandbox.
Having an issue where a 3rd party library is setting document.body.innerHTML, and that causes setState to stop seeming to work fully. In React tools in chrome and when debugging it updates the state object correctly, but the rendered output does not update.
Cannot figure out what is going on here, no error occurs, stepping through the debugger nothing stands out to me. At first I was also using dangerouslySetInnerHTML, but the issue seems to be occurring on normal jsx value injection too.
Example here, if you modify the value of const ModifyBody = true; to false and it works as expected, but with the document.body.innerHTML = it doesn't update.
https://codepen.io/eibwen/pen/gjBxrZ
Just to restate it, its a third party library doing the body.innerHTML. Specifically its a library to create a medium.com-like popup when selecting text, if you happened to know a library that could do this with better compatibility with TypeScript/React I'd be all ears on that too
I want to get a callback when the screen is changed, so I can stop my recurring request that runs on that specific screen. “dispose” is only called when Navigator.pop is used, but not when Navigator.push is called. Is there a way to detect that the screen is changed and not being shown at the moment?
Register a RouteObserver on your MaterialApp or WidgetsApp and make your stateful widget a RouteAware. Sample code here: RouteObserver