React - Redux fetch data onclick and rerender - reactjs

Question

Good day! I wanna to do dynamic dropdown menu, witch get data from server. So, if menu item clicked i wanna to fetch data from server and render result in list. Like this:
import React, {Component} from 'react'
import {connect} from 'react-redux'
import {fetchData} from 'actions'
class MenuItem extends Component {
constructor(props) {
super(props);
this.state = {
isOpened: false,
}
}
toggleOpen() {
this.props.fetchData(); // Here is fetching data using redux-thunk
this.setState({isOpened: !this.state.isOpened});
}
render() {
const {data} = this.props;
return (
<a href="#" className="left-menu__link"
{...( this.state.isOpened && {
className: "left-menu__link is-opened"
} )}
onClick={(e) => {
e.preventDefault();
this.toggleOpen.bind(this)();
}}>
<ul className="left-menu__sub-level">
{!R.isEmpty(data) && data.map((item) =>
<li item={item} key={item.id}/>)}
</ul>
)
}
const mapStateToProps = state => ({
data: getData(state), // get data from state
});
const mapDispatchToProps = {
fetchData
};
export default connect(mapStateToProps, mapDispatchToProps)(MenuItem)
So can you tell me which is the best way to do this?

Answer 1

Here I have changed some of the code. I hope it will help
import React, {Component} from 'react'
import {connect} from 'react-redux'
import {fetchData} from 'actions'
class MenuItem extends Component {
constructor(props) {
super(props);
this.state = {
isOpened: false
}
this.handleClick = this.handleClick.bind(this)
}
handleClick(e) {
e.preventDefault()
this.setState({isOpened: !this.state.isOpened})
this.props.fetchData().then((response) => {
....
....
})
}
render() {
const {data} = this.props;
const className = !this.state.isOpened ? 'left-menu__link' : 'left-menu__link is-opened'
return (
<a href="#" className={className}
onClick={this.handleClick}>
<ul className="left-menu__sub-level">
{!R.isEmpty(data) && data.map((item) =>
<li item={item} key={item.id}/>)}
</ul>
)
}
}
const mapStateToProps = state => ({
data: getData(state), // get data from state
});
const mapDispatchToProps = {
fetchData
};
export default connect(mapStateToProps, mapDispatchToProps)(MenuItem)