score:0
what you can do, to force the element unmounting, is to create two elements which extend your video element, and switch between them when you update the src
. with conditional rendering, on each change, one of the video components will be unmounted, and another will be mounted in it's place.
following is the example using a set array of video src
s:
import react, { component } from 'react';
const videos = [
'https://img-9gag-fun.9cache.com/photo/a9krqe1_460sv.mp4',
'https://img-9gag-fun.9cache.com/photo/a3qq4pn_460sv.mp4',
'https://img-9gag-fun.9cache.com/photo/ae2yq9o_460sv.mp4'
];
class app extends component {
constructor(props) {
super(props);
this.onnext = this.onnext.bind(this);
this.state = {
current: 0
}
}
onnext = event => {
this.setstate((prevstate) => ({
// using modulo to stay within the length of videos array
current: (prevstate.current + 1) % videos.length
}));
};
render() {
return (
<div classname="app">
// switching between two video components if index is odd/even
{ this.state.current % 2 === 1
? <one current={this.state.current} />
: <two current={this.state.current} /> }
<hr />
<button onclick={this.onnext}>next video</button>
</div>
);
}
}
class video extends component {
render() {
return (
<video key={'key-'+this.props.current} id="vid" classname="video-elem" playsinline src={videos[this.props.current]} />
);
}
componentdidmount() {
console.log("componentdidmount");
}
componentwillunmount() {
console.log("componentwillunmount");
}
}
class one extends video {}
class two extends video {}
export default app;
running example on repl.it.
score:1
i'm not sure of what you are trying to accomplish but, you may want to check unmountcomponentatnode . it allows you to actually unmount your custom component and the references to it, not only the html elements. then, you can add your component again.
you can do something like:
reactdom.unmountcomponentatnode(document.getelementbyid(yournodeid));
sorry it's not a very complete answer but it's hard without knowing more of your implementation. anyway, maybe it points you to the right direction.
Source: stackoverflow.com
Related Query
- Reattaching DOM element in React component
- React - getting a component from a DOM element for debugging
- Return DOM element in render function of React component
- How to check if Dom Element or React Component
- Select DOM element by text from React component
- Target dom element of react component without ref
- Render react component into single DOM element
- Using methods of react component in native dom element
- How to replace a set of html elements in place of a child element within the DOM rendered by React component within same component
- How to adjust the onClick event of react.children when child is a react component not a DOM element
- React - how to get real DOM element after component is updated
- Warning: React does not recognize the `isNarrow` prop on a DOM element - Material UI Component
- Target container is not a DOM element - React and GatsbyJS - React-slick Component
- Insert DOM element into React component
- How to access a DOM element in React? What is the equilvalent of document.getElementById() in React
- Difference between React Component and React Element
- React Error: Target Container is not a DOM Element
- React - check if element is visible in DOM
- Getting DOM node from React child element
- React wrapper: React does not recognize the `staticContext` prop on a DOM element
- How to solve Warning: React does not recognize the X prop on a DOM element
- Correct way to define an empty dom element in React
- How do I get an attribute of an element nested in a React component using Jest and/or Enzyme?
- React - get React component from a child DOM element?
- React, get bound parent dom element name within component
- Click event not firing when React Component in a Shadow DOM
- React, how to access the DOM element in my render function from the same component
- React Uncaught Error: Target container is not a DOM element
- access root element of react component
- How to get params in component in react router dom v4?
More Query from same tag
- Winterfell - how to set custom validation message
- I am facing the problem with react-router-dom
- Images not showing up when i deploy my app to gh-pages
- Cancel axios get request when typing reactjs
- Check if all properties are false
- Html Webpack Plugin: Child Compilation Failed error in React page
- Send value from child component to parent in React
- How to process rendered result of a child component in React
- Particles.js does not cover the entire page but instead it is inside the card component
- console log of returned value shows a unusable response even after chaining a then to it
- Navigating with React router without using links
- Form submission using react without having state
- How to display dropdown selected value in pdf using ReactToPrint plugin?
- Run function in useeffect when state changes after 1 second if no other changes
- React pass function to child parent not re rendering
- Impossible to access(display) the image url from Strapi v4 with ReactJS
- React change className in x second if a specific className is active
- antd table export to csv by react-csv MAKE table slow
- Timer/Counter for react component - value remains 0 after increasing it with setInterval()
- How to pass a function reference to a child component while also using the state of the parent component?
- How to pass data from render method to multiple components in React?
- State updates may be asynchronous, what is exactly this.props?
- Generator functions dont show my data, how to access it?
- what does it mean "Legacy octal literals are not allowed in strict mode" in ReactJS?
- How to call state from base class in ReactJS?
- How to access a function in a child class component from a stateless parent?
- Adding emoji is showing undefined when adding it for the first time only
- How to fetch data from multiple db from the node.js in frontend react.js
- How to style a single element inside Material-ui autocomplete
- Animate presence not working in next js for exit animations only?