How to pass data from functional component to class component in reactjs?

Question

I want to pass data from my App.js file to a sub class component.I have tried with props,but its not workng at all

const org = 'Organization Dashboard'
const remotes = 'FromAdmin';
const DashboardContainer = ()=>(
  <Sidebar org={org}>
  <div className="App">
    <Route path='/dashboard' component={Dashboard}/> 
    <Route path='/mytab' component={MyTab}/>
    <Route path='/team' component={MyTeam}/>
    <Route path='/settings' component={Settings}/>
    <Route path='/logout' component={Logout}/>
    <Route path='/team-settings/:param1' component={TeamSettings}/>
    **<Route remotes='remotes' path='/user-settings/:param1'   component={MyTab}/>**
  </div>
  </Sidebar>
)

I want to pass data in MyTab class component, when i use this.props in myTab , its showing undefined

Help will be appreciated

Drew Reese · Accepted Answer · 2020-05-06 07:29:43Z

3

I assume you're trying to pass remotes='remotes' to MyTab. Components rendered by a Route are passed only the route props, but you can use an anonymous inner function to slip in extra props. Don't forget to pass on the route props if you need them!

<Route
  path='/user-settings/:param1'
  component={routeProps => <MyTab {...routeProps} remotes='remotes' />}
/>

edited May 6, 2020 at 7:29

answered May 6, 2020 at 7:21

Drew Reese

207k19 gold badges280 silver badges293 bronze badges

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

Comments

moshfiqrony · Accepted Answer · 2020-05-06 07:40:03Z

0

You can override the component. By default, component accepts a class-based or function-based component. But you can override the component. Not only data you can pass functions as well. But you should not do this. Use redux to achieve this kind of thing. If it is static data then you can pass this way. But id it is dynamic data then use redux instead.

<Route
    path = '/myTab'
    component = {(props) => <MyTab {...props} data={data}/>}
/>

answered May 6, 2020 at 7:40

moshfiqrony

4,7833 gold badges23 silver badges32 bronze badges

Collectives™ on Stack Overflow

How to pass data from functional component to class component in reactjs?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related