How to make User Logout After Countdown React - reactjs

Question

I'm trying to achieve making the user log out after the countdown ends, I'm sorry because I am just new in react still learning, anyways this is my code. Thank you so much for your help I really appreciate it. Has an error that says TypeError: this.props.onLogout is not a function :)
My Code:
import React, { Component } from 'react';
import Countdown from "react-countdown";
import {
Redirect,
} from 'react-router-dom';
import { logoutUser } from '../../../actions/authActions';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
export class OnlineOrders extends Component {
onLogout = (e) => {
e.preventDefault();
this.props.logoutUser();
};
render() {
const renderer = ({ days, hours, minutes, seconds, completed }) => {
if (completed) {
this.props.onLogout();
return <>
<Redirect to='/billing/plans' />
</>;
} else {
return (
<span>
{days}:{hours}:{minutes}:{seconds}
</span>
);
}
};
return (
<>
<div className='note primary'>
You have <strong><Countdown date={Date.now() + 5000} renderer={renderer} /></strong> remaining on your free trial.
<a href='/billing/plans'> Activate Now</a> to stay alive!
</div>
</>
);
};
}
OnlineOrders.propTypes = {
logoutUser: PropTypes.func.isRequired,
auth: PropTypes.object.isRequired,
};
const mapStateToProps = (state) => ({
auth: state.auth,
});
export default connect(mapStateToProps, { logoutUser })(OnlineOrders);

Answer 1

Looks like you need to invoke onLogout correctly.
if (completed) {
this.onLogout();
return <Redirect to='/billing/plans' />;
} else {
return (
<span>
{days}:{hours}:{minutes}:{seconds}
</span>
);
}
Side note: You can invoke the callback from props directly and save a function declaration.
if (completed) {
this.props.logoutUser();
return <Redirect to='/billing/plans' />;
} else {
return (
<span>
{days}:{hours}:{minutes}:{seconds}
</span>
);
}
The else is actually also superfluous, it can be removed.
const renderer = ({ days, hours, minutes, seconds, completed }) => {
if (completed) {
this.props.logoutUser();
return <Redirect to='/billing/plans' />;
}
return (
<span>
{days}:{hours}:{minutes}:{seconds}
</span>
);
};