React .props is undefined - reactjs

Question

I have initial state for a component 'Posts'
inside reducer like this:
import {FETCH_POSTS, NEW_POST, ASSISTANT_MANAGER, BARTENDER, OPEN_MODAL} from '../actions/types'
const initialState = {
items: [],
item: {},
showComponent: false,
selectedJob: {}
}
reducers/index.js
import {combineReducers} from 'redux';
import postReducer from './postReducer'
export default combineReducers({
posts: postReducer,
})
/components/Posts
class Posts extends Component {
constructor(){
super();
this.state = {
selectedJob: ""
};
}
_onButtonClick(selected_post, e) {
this.setState({
selectedJob:selected_post,
showComponent:true
});
console.log('my current props', this.props)
}
componentWillMount(){
this.props.fetchPosts();
}
render() {
const keys = generateKey(new Date().getTime())
var dictionary = this.props.posts
const postItemsArr = Object.keys(dictionary).map(post=>dictionary[post])
const number = 0
const postItems = postItemsArr.map(
post=>(
<Jumbotron key={generateKey(post.positiontitle) + generateKey(post.businessId)} >
<div className="position">{post.positiontitle}</div>
<br></br>
<BusinessName businessnameType={post.businessname} />
<br></br>
<JobDescription jobDescription={post.description_sanitized} />
<br></br>
<Button onClick={this._onButtonClick.bind(this, post)}>DETAILS</Button>
</Jumbotron>
))
return (
<div>
<h1> Jobs Listings </h1>
{postItems }
{this.props.showComponent ? <ModalComponent selectedJob={this.state.selectedJob}/>: null}
</div>
);
}
}
Posts.propTypes = {
fetchPosts: PropTypes.func.isRequired,
posts: PropTypes.array.isRequired,
newPost:PropTypes.objects,
}
const mapStateToProps = state => (
{
posts: state.posts.items,
newPost: state.posts.item,
showComponent: state.posts.showComponent
});
export default connect(mapStateToProps, {fetchPosts})(Posts);
What I'm trying to do is _onButtonClick(selected_post, e){
I want to set the props here which sets showComponent to True.
}
When I use this.props.showComponent(true) it says .showComponent is not defined.
inside my actions file I have showComponent Action which should dispatch the props but doesn't as expected.
./actions/postActions
import {FETCH_POSTS, NEW_POST, OPEN_MODAL} from './types';
export const showComponent = () => dispatch => {
dispatch({
type:OPEN_MODAL,
payload:false
})
}
export const fetchPosts = () => dispatch => {
fetch('http://127.0.0.1:8000/?filters')
.then(res=>res.json())
.then(posts => dispatch({
type:FETCH_POSTS,
payload:posts.results,
}))
}
Overally, how would I dispatch an action to reducers without having to use export connect like how I did for fetchPosts