component keeps coming back undefined even tho server prints values - node.js

Question

Server
The server prints the groups
I am Trying to retrieve all groups from my Mongodb database but the value keeps returning as undefined.
I am creating a react app but i might be getting confused with Aync and how to use the promise
router.get('/groups', async (req, res) => {
try {
const groups = await Group.find().sort({ date: -1 });
res.json(groups);
console.log(groups);
} catch (err) {
console.error(err.message);
res.status(500).send('Server Error');
}
});
Actions
i cant also see the groups being printed here
export const getAllGroups = () => async (dispatch) => {
axios
.get("/api/group/groups")
.then(res =>
dispatch({
type: GET_GROUPS,
payload: res.payload.data
})
)
.catch(err =>
dispatch({
type: GET_GROUPS,
payload: null
})
);
};
Component
this is where i keep getting the undefined when i try to use groups.
class GroupList extends Component {
componentDidMount() => {
const {groups} = await this.props.getAllGroups();
this.props.getAllGroups(groups)
}
// Delete account
onDeleteClick = id => {
const { groups } = this.props;
const groupData = {
id: id,
groups: groups
};
this.props.deleteGroup(groupData);
};
render() {
const { user, groups } = this.props;
let groupItems = groups.map(group => (
<li key={group._id} style={{ marginTop: "1rem" }}>
<button
style={{ marginRight: "1rem" }}
onClick={this.onDeleteClick.bind(this, group._id)}
className="btn btn-small btn-floating waves-effect waves-light hoverable red accent-3"
>
<i className="material-icons">delete</i>
</button>
<b>{group.name}</b>
</li>
));
return (
<div>
<Link to="/" className="btn-flat waves-effect">
<i className="material-icons left">keyboard_backspace</i> Back to
home
</Link>
{ { <ul>{groupItems}</ul> } }
</div>
)
}
}
GroupList.propTypes = {
logoutUser: PropTypes.func.isRequired,
getAllGroups: PropTypes.func.isRequired,
// addAccount: PropTypes.func.isRequired,
deleteGroup: PropTypes.func.isRequired,
groups: PropTypes.array.isRequired,
// plaid: PropTypes.object.isRequired,
user: PropTypes.object.isRequired
};
const mapStateToProps = state => ({
groups: state.groups
});
export default connect(
mapStateToProps,
{ getAllGroups, deleteGroup }
)(GroupList);