How to render a video component in reactjs

I am trying to render a video component, which is called as a result of an input action from another component. I have tried several ready-made packages installed through npm install. but none seem to be working for me. So, I’m of the opinion that the problem is with my own code :

*// this component receives a prop based on the user's action*
    import React from 'react';
    import ShowMovie from 'ShowMovie'

    class MoviePick extends React. Component{

    render(){
    return(
    <div>
    {props.movie==="Startrek"? <ShowMovie/> : <span>only startrek is vailable}</span>
    }
</div>
    );
    }
}

    *// this component shows the movie*
    import React from 'react'
    import VideoPlayer from 'react-simple-video-player';

    const ShowMovie = () => (
      <VideoPlayer
        url="/startrek.mp4"
        poster="/myPoster.png"
        width={400}
        height={300}
        autoplay
      />
    );

    export default ShowMovie ;
  render(){
    return(
      <div>
      {props.movie==="Startrek"? <ShowMovie/> : <span>only startrek is vailable}</span>
    )
  }
};

This is very clearly wrong, and should be throwing up lots of errors; it can’t render because you havn’t written valid code. There is no closing tag and the } is in the wrong place.

that was actually a typo, i have corrected it, but still not working . . . i kinda feel its something else i got wrong