Search code examples
javascriptreactjsreact-props

Cant passing props via React Router


I have class GetProfile extend the React.Component and return state in render. I want get the props GetProfile with react router but i got message

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

class GetProfile extends React.Component{
....
render(){
        return(
            <div>
                {React.cloneElement(this.props.children, { 
                        data: this.state.data, 
                        department : this.state.department 
                    })
                }
            </div>
        )
    }
}
export default GetProfile;

In the Router.js this my code

import Home from './components/Home';
import GetProfile from './action/GetProfile';

....
<GetProfile>
   <Authenticated exact path="/home" render={(props) => <Home {...props.data}/>}/>
</GetProfile>
....

Solution

  • try by importing React
    import React from 'react'
    class GetProfile extends React.Component{
        ....
        render(){
            return(
                <div>
                    {React.cloneElement(this.props.children, { 
                        data: this.state.data, 
                        department : this.state.department 
                    })
                }
            </div>
        )
      }
     }
     export default GetProfile;