React.JS video player bug

Question

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?

@AnkitVerma: I have rejected your edit on this question, as you had added far too much pleading into the title. We trim begging material out - please do not add it in! Thanks. — halfer, Mar 14 '20 at 11:02

score 1 · Accepted Answer · answered Mar 14 '20 at 08:31

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';

React.JS video player bug

1 Answers1