score:11
react doesn't know which video to update unless key
property for each video is provided.
so when you set the key prop for the video to something unique, say url
pass to the player, it should work.
const landingpagevideoplayer = ({ url, isactive }) => {
const playerclassname = `video-player ${
isactive ? "video-player--is-active" : null
}`;
return (
..... 👇 .....
<video key={url} classname={playerclassname} autoplay loop muted>
<source src={url} type="video/mp4" />
</video>
);
};
for more information how the key property works, check out the official documentation list and keys.
the first sentence reads,
keys help react identify which items have changed, are added, or are removed. keys should be given to the elements inside the array to give the elements a stable identity
in your case, you have two videos (which is actually a list of two items), so to help react which video has changed, key
would help react to identify which video has changed.
score:1
add key={this.state.url} like this
<div classname="container">
<div classname="row">
<div classname="col-8">
<video width="720" key={this.state.url} height="540" controls >
<source src={this.state.url} type="video/mp4" />
</video>
<h1>{this.state.url}</h1>
Source: stackoverflow.com
Related Query
- HTML Video tag not updating source on re render
- React styled-component not recognising HTML attribute 'autoplay' of video tag
- dynamic variable in jsx html tag not updating
- HTML video tag - change source on viewport without media attribute
- Video HTML tag is not playing in React.js
- Updating source URL on HTML5 video with React
- Video displayed in ReactJS component not updating
- Reactjs Warning: input is a void element tag and must not have `children` or use `props.dangerouslySetInnerHTML`. Check the render method of null
- React onLoad event on image tag is not getting called when using conditional render
- React hook useLayoutEffect not updating ref parameter on initial render
- React Helmet not updating meta title tag
- How to use Video html tag instead of img tag in material-ui Card Component
- Apollo Client Reactive variables - not trigger re render after updating the value
- Why my react html render is not working?
- head tag not appearing in view source : next:js
- What could cause html select element not to render on the browser?
- React-countdown-now not updating on render
- CKEditor 5 showing video element, but plain HTML inserted in a div does not show the element
- I am trying to render the names on my screen using "Rick and Morty" REST API,but nothing literally renders and my state is not updating
- React render pasted html as tags, not string
- React data components table does not render HTML
- React JS Not Completely Updating View When Render Is Called With New Props
- onChange the textbox value is not updating in HTML form using React
- React Not Updating Render After SetState
- react-grid layout html not updating cols
- React | render html tag in jsx
- Uploaded video wont play using html video tag
- React: Adding props only to React component and not html tag (React.Children.map recursively)
- Video output not changed when changing source in zxing js library
- ReactJS not rendering HTML Audio correctly after first render
More Query from same tag
- How to output current values from the rc-slider react component?
- Close responsive navigation | React JS
- Why use Express with ReactJS
- Error: Collecting page data for /dashboard/widget is still timing out after 2 attempts nextjs
- MobX ReactJS AntD updates won't re-render
- Problems with "withRouter" and redux's "connect()"
- How to manage nested complex objects using Formik
- React child to parent communication
- How to Style Material UI Select Popup?
- React - Render HTML When Setting a State After Fetching Data
- NextJs passing in prop as className
- React dangerouslySetInnerHTML Only Allow Specific HTML tags
- React/Redux: Effectively change a component's corresponding state in Redux's tree
- How do I fetch from swapi from react app?
- Integration in React with Ruby on Rails.
- React - How to define props with typescript
- How to publish existing CRA application to npm(any) repository?
- How should I refactor this code to prevent function was used before it was defined
- Converting private Route with props from react-router v5 to react-router v6
- How to save axios response to a variable and update the state in react js?
- Change the color of calendar dates (react big calendar)
- Two looped async calls followed by a sync call
- Webpack file-loader publicPath
- Each child list key is unique yet I still get the error in my console. Reactjs
- How to Unit test the rendering of a child component in the parent component using react testing library?
- module.default is undefined dynamic import
- How to access array in array from react component?
- React and SVG. Works for JSX, fails when used in Style
- How to design a UI Component like this in React?
- ReactJS: How to fix TypeError: data is not iterable