Prop being undefined makes no sense - reactjs

Question

I'm using React and Redux. I'm new to React, but not to development. This is my first independent project after training. I want to really learn this and I don't understand what is happening right now.
I have a Delete page that I route to for List Items. I pass in the prop of list_item_id via Route. I'm getting that prop with no problem, and can access it properly through my method. This page is also using Modal, in case that's a factor.
Here's the Route section from App.js
return(
<div className="ui container">
<Router history={history}>
<div>
<Header />
<Switch>
<Route path="/" exact component={List} />
<Route path="/lists" exact component={List} />
<Route path="/list/:list_id" exact component={ListItemList} list_id={this.props.list_id} />
<Route path="/listitems/new/:list_id" exact component={ListItemCreate} />
<Route path="/listitems/edit/:list_item_id" exact component={ListItemEdit} />
<Route path="/listitems/delete/:list_item_id" exact component={ListItemDelete} />
<Route path="/listitems/:list_item_id" exact component={ListItemShow} />
</Switch>
</div>
</Router>
</div>
);
I'm getting the error onclick of the Delete button.
The prop that is undefined I'm getting from Redux via mapStatetoProps:
const mapStateToProps = (state, ownProps) => {
return {
listItem: state.listItems[ownProps.match.params.list_item_id]
};
};
When the page initially renders, it has the correct value. But when I click the Delete button, for some reason it's re-rendering, listItem is undefined, and it breaks.
Here's the component:
import React from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import Modal from '../Modal';
import history from '../../history';
import { fetchListItem, deleteListItem } from '../../actions';
class ListItemDelete extends React.Component {
componentDidMount(){
this.props.fetchListItem(this.props.match.params.list_item_id);
}
renderActions(){
const list_item_id =this.props.match.params.list_item_id;
console.log('listItem');
console.log(this.props.listItem);
const list_id = this.props.listItem.list_id; // <--- breaking here
//console.log('list_id is ' + list_id);
return(
<React.Fragment>
<button onClick={() => this.props.deleteListItem(list_id, list_item_id)} className="ui button negative">Delete</button>
<Link to="/" className="ui button ">Cancel</Link>
</React.Fragment>
);
};
renderContent(){
if(!this.props.listItem){
return 'Are you sure you want to delete this list item?';
}
return `Are you sure you want to delete list item: ${this.props.listItem.list_item}?`;
}
render(){
return (
<Modal
title="Delete List Item"
content={this.renderContent()}
actions={this.renderActions()}
onDismiss={() => history.push("/")}
/>
);
}
}
const mapStateToProps = (state, ownProps) => {
return {
listItem: state.listItems[ownProps.match.params.list_item_id]
};
};
export default connect(mapStateToProps, { fetchListItem, deleteListItem })(ListItemDelete);
In case it's relevant, here's the action creator:
export const deleteListItem = (list_id, list_item_id) => async dispatch => {
let data = new FormData();
data.append('request', 'delete');
data.append('list_item_id', list_item_id);
await listItems.post(`/listItemsMaintenance`, data);
dispatch({ type: DELETE_LIST_ITEM, payload: list_item_id });
history.push(`/list/${list_id}`);
};
And the reducer (It's also not deleting properly, which is why I'm looking into it):
import _ from 'lodash';
import {
FETCH_LIST_ITEM,
FETCH_LIST_ITEMS,
CREATE_LIST_ITEM,
EDIT_LIST_ITEM,
DELETE_LIST_ITEM,
MARK_COMPLETED_LIST_ITEM
} from '../actions/types';
export default (state = {}, action) => {
const emptyObj = {};
switch (action.type) {
case FETCH_LIST_ITEMS:
return { ...state, ..._.mapKeys(action.payload, 'list_item_id') };
case FETCH_LIST_ITEM:
return { ...state, [action.payload.list_item_id]: action.payload };
case CREATE_LIST_ITEM:
return { ...state, [action.payload.list_item_id]: action.payload };
case EDIT_LIST_ITEM:
return { ...state, [action.payload.list_item_id]: action.payload };
case MARK_COMPLETED_LIST_ITEM:
return { ...state, [action.payload.list_item_id]: action.payload };
case DELETE_LIST_ITEM:
console.log('Now Reducing DELETE');
console.log(action.payload);
return _.omit(state, action.payload);
default:
return state;
}
};
And WHY is it calling the renderActions method so many times? Twice when it correctly gets the value of listItem and twice when it doesn't?? Here's an image of the error and console.