Search code examples
javascriptreactjsreact-player

React.JS video player bug

I am working with a player. I'm developing a website in React and want to use Fragment of a video player to use on some pages. So I create videoFr.js script with that code.

import React from 'react'
import '../styles/video.scss';

const fragmentPlayer =(props)=> {
    return (

      <>
      <iframe 
      width="560" 
      height="315" 
      src={props.url} 
      frameborder="0" 
      allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" 
      allowfullscreen>

      </iframe>
      </>
    )


}

export default fragmentPlayer;

I want to render on Main page a video and pass the component.

import React from 'react'
import '../styles/Main.scss';
import fragmentPlayer from '../Components/video.js';

class Main extends React.Component {



    render(){
        return (
           <body>
               <sector id='banner'>
                   <h1>hi {this.props.name}</h1>
                <h1>- Culture</h1>
                <p>We unite business and education. And much more...</p>
                <fragmentPlayer url="https://www.youtube.com/embed/QTACugN67yc"/>
               </sector>
               <sector id='m-training'>
               <h1>TRAINING & COMPETITION</h1>
                <p>Every semester, thousands participants  from over 90 countries join the X-Culture competition.
                <br/>They compete, collaborate, learn the challenges and best practices of international business consulting.</p>
               </sector>
               <sector id='m-business'>
               <h1>BUSINESS SOLUTIONS</h1>
                <p>Companies present their business challenges. Thousands of amateurs and professionals develop their solutions.
                    <br/>If there is something good for your business out there, they will find it and bring it to you.</p>
               </sector>
           </body>

        )

    }
}

export default Main;

Nothing happens in render. However, when I import not fragmentPlayer from my script, but Player and use Player - everything works fine.

import Player from '../Components/video.js';

 <Player url="https://www.youtube.com/embed/QTACugN67yc"/>

What's going on here?

Solution

  • In React Our Component names first letter must be capital because this is how React differences between our components and html tags. So use

    import FragmentPlayer from '../Components/video.js';

    instead of 

    import fragmentPlayer from '../Components/video.js';