title: React component folder use for external controls
body: <p>I have a video player component situated in the components folder of a React project</p>
  <pre><code>function ReactVideoPlayer(){
  const [url] = useState('https://media.w3.org/2010/05/sintel/trailer_hd.mp4');
    const [controls, setControls] = useState([
      'play',
      'time',
      'progress',
      'volume',
      'full-screen'
    ]);
    const [isPlaying, setIsPlaying] = useState(false);
    const [volume, setVolume] = useState(0.7);
    const [timeStart] = useState(5);
  </code></pre>
  <p>I then have that component embedded in index.js simply as</p>
  <pre><code>    &gt; return (
      &gt;     &lt;div&gt;    
  &lt;ReactVideoPlayer    /&gt;
      &gt;     &lt;/div&gt;
  </code></pre>
  <p>This player works fine if I have the url on the component page.
  But can someone please explain to me how you move the video url from the component page to the index page eg</p>
  <pre><code>&lt;ReactVideoPlayer
  url='https://media.w3.org/2010/05/sintel/trailer_hd.mp4'
     /&gt;
  </code></pre>
  <p>This does not work but hopefully you get the idea.
  I am trying to work out how to build components and then use them more than once in a page.
  Thanks in advance</p>