component props returns empty react js

Question

I have created two components App and leftBar. I'm getting the Class component props in App component. But the same prop is empty in LeftBar.

Index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter, Route, Switch} from 'react-router-dom';


/** Component **/
import App from './App';


ReactDOM.render(
    <BrowserRouter>
    <Switch>
        <Route path="/:folders/:actions" component={App}></Route>
    </Switch>
</BrowserRouter>, document.getElementById('app'));

App.js

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 (
     <LeftBar />
   )
  }
}

LeftBar.js

class LeftBar extends Component{
  constructor(props) {
        super(props);
        this.state = {
            leftBar: ["sarath"]
        }
        console.log(this.props); //this returns empty object {}
    }
}

someone point out what was the issue behind this. I want to use props across the multiple components.

Deryck · Accepted Answer · 2018-02-24 07:57:04Z

2

react-router will not pass props down the way you are hoping. You need to first pass props to App by doing

// ...
<Route path="/:folders/:actions" component={props => <App {...this.props} />} />

Then you need to pass them along in your child component(s). I am including this.state with the assumption you want to use this inside of LeftBar but you may remove {...this.state} if that is incorrect:

// ...
render () {
    return (
        <LeftBar 
            {...this.props} 
            {...this.state} />
    )
}

answered Feb 24, 2018 at 7:57

Deryck

7,6662 gold badges27 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sarath Kumar Over a year ago

I called the console.log after the leftBar: ["sarath"] was set. Still I'm getting {}.

Deryck Over a year ago

yes, because you are setting this.state = { leftBar: ["sarath"] }. this.state is not this.props

phts · Accepted Answer · 2018-02-24 08:09:56Z

1

Because you don't assign any props on <LeftBar />.

You have to pass the required props to this component as well:

render(){
 return (
   <LeftBar {...this.props}/>
 )
}

edited Feb 24, 2018 at 8:09

answered Feb 24, 2018 at 7:52

phts

3,9251 gold badge22 silver badges31 bronze badges

Collectives™ on Stack Overflow

component props returns empty react js

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related