Converting a class to a functional component

Question

I am trying to convert this class to a functional component but no luck. Can anyone give me direction?

        import { Redirect, Route, RouteProps } from 'react-router'


        function mapStateToProps (state: AppState, ownProps: RouteProps): MappedProps {
          const user = state.auth.user
          return {
            External: user ? user.External : true,
          }
        }

        type InnerRouteProps = RouteProps & MappedProps

        class MyInnerRoute extends React.Component<InnerRouteProps> {
          render () {
            const {
              props: { External, component, render, children, ...rest },
            } = this

            return (
              <Route
                {...rest}
                render={props => {
                  if (External) {
                    return <Redirect to={'/'} />
                  }
                  if (component) {
                    const Component = component
                    return <Component {...props} />
                  }
                  if (render) {
                    return render(props)
                  }
                  return children
                }}
              />
            )
          }
        }

        export default connect(mapStateToProps)(MyInnerRoute)
        

It should look like this. Not sure where the const props will be here..

        const  MyInnerRoute = ()  =>  {
          
          return (
            <Route
              {...rest}
              render={props => {
                if (External) {
                  return <Redirect to={'/'} />
                }
                if (component) {
                  const Component = component
                  return <Component {...props} />
                }
                if (render) {
                  return render(props)
                }
                return children
              }}
            />
          )
          
        }

        export default MyInnerRoute

Answer 1

Your props will come in through the function parameters, like so:

const MyInnerRoute = (props: InnerRouteProps) => {...

And then you can use them just like you did in your class before.

const { External, component, render, children, ...rest } = props

Answer 2

This should do the work.

const  MyInnerRoute = ({ External, component, render, children, ...rest })  =>  {
          
          return (
            <Route
              {...rest}
              render={props => {
                if (External) {
                  return <Redirect to={'/'} />
                }
                if (component) {
                  const Component = component
                  return <Component {...props} />
                }
                if (render) {
                  return render(props)
                }
                return children
              }}
            />
          )
          
        }

        export default MyInnerRoute