title: component props returns empty react js
body: <p>I have created two components <code>App</code> and <code>leftBar</code>. I'm getting the <code>Class component props</code> in App component. But the same prop is empty in <code>LeftBar</code>.</p>
  
  <p><strong>Index.js:</strong></p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import {BrowserRouter, Route, Switch} from 'react-router-dom';
  
  
  /** Component **/
  import App from './App';
  
  
  ReactDOM.render(
      &lt;BrowserRouter&gt;
      &lt;Switch&gt;
          &lt;Route path="/:folders/:actions" component={App}&gt;&lt;/Route&gt;
      &lt;/Switch&gt;
  &lt;/BrowserRouter&gt;, document.getElementById('app'));
  </code></pre>
  
  <p><strong>App.js</strong></p>
  
  <pre><code>import React, {Component} from 'react';
  import {BrowserRouter as Router, Route} from 'react-router-dom';
  
  import LeftBar from './components/left-bar';
  
  class App extends Component {
   constructor(props){
      super(props);
      console.log(this.props); //Returns the object
    }
  
  render(){
     return (
       &lt;LeftBar /&gt;
     )
    }
  }
  </code></pre>
  
  <p><strong>LeftBar.js</strong></p>
  
  <pre><code>class LeftBar extends Component{
    constructor(props) {
          super(props);
          this.state = {
              leftBar: ["sarath"]
          }
          console.log(this.props); //this returns empty object {}
      }
  }
  </code></pre>
  
  <p>someone point out what was the issue behind this. I want to use props across the multiple components.</p>