0

I have been trying to solve in passing a variable value from a main component (App.js) to a child component Attendees.js. The route is as follows

App.js

<Router>
     ...
     <Route path="/attendees/:userID/:meetingID" component={Attendees} 
      adminUser={this.state.userId}/>} />
</Router>

Attendees.js

componentDidMount(){
    const meetingID = this.props.match.params.meetingID
    const adminUser = this.props.adminUser
}

I am not able to retrieve the adminUser which passed as props.(adminUser is getting undefined). But I am able to do variables (meetingID, userID) encoded in URL. How can I get the value adminUser in child component.

Community
  • 1
  • 1
Vikrant Agrahari
  • 133
  • 2
  • 11

1 Answers1

1

You can render an anonymous component and slip the adminUser prop in. Don't forget to proxy the route props along as well.

<Router>
  ...
  <Route
    path="/attendees/:userID/:meetingID"
    component={routeProps => (
      <Attendees {...routeProps} adminUser={this.state.userId} />
    )} 
  />
</Router>
Drew Reese
  • 165,259
  • 14
  • 153
  • 181
  • Thanks! It works. I had tried this but i replaced `routeProps` with `props`. didn't work out well. – Vikrant Agrahari Jun 10 '20 at 04:51
  • Now I am getting another error in console. It is saying --- Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method. in Attendees (at App.js:110) in component (created by Context.Consumer) – Vikrant Agrahari Jun 10 '20 at 04:51
  • 1
    @VikrantAgrahari You can name it anything really, but route props is what is being passed from the `Route`, so it makes it clear what it is. – Drew Reese Jun 10 '20 at 04:52
  • 1
    @VikrantAgrahari Different issue, please open a new question. Feel free to link it here. – Drew Reese Jun 10 '20 at 04:54