Redux component, can I write click events without using class - reactjs

Question

I am writing the following redux component (dumb)
const TopMenuComponent = () => (
<div className={styles.topMenuIndex}>
<header role="banner">
<nav role='navigation'>
<ul>
<li className={styles.expando}>☰</li>
<li>Home</li>
<li>About</li>
</ul>
</nav>
</header>
</div>
);
Now on the click event of the ☰ link I want to write some code to perform some function. I have two questions around this
Is it possible to do this without deriving this from the React.Component class using the above code. My concern is that this is a dumb component and if we derive this from React.Component then we are adding more intelligence into this.
Should this expansion click trigger a stage change on the redux store? This is just a simple expansion of a bunch of links thats all

Answer 1

If you want to make it a dumb component, then you can pass in a property, e.g. isOpen, which defines if the menu is expanded or not, and a function, e.g. handleClick, which should be called on a button click. This way, the state can be managed by a parent component.
Now whether you manage this state in the internal state of parent component or with your redux store is entirely up to you. You should choose redux if you will need to open and close the menu remotely.

Answer 2

There are two ways to achieve what you want to without affecting the redux store
First, Passing function as a prop to the component from the parent component and then calling this onClick
const TopMenuComponent = (props) => {
return (
<div className={styles.topMenuIndex}>
<header role="banner">
<nav role='navigation'>
<ul>
<li className={styles.expando} onClick={props.myhandler}>☰</li>
<li>Home</li>
<li>About</li>
</ul>
</nav>
</header>
</div>
)
};
Second way is to define a onClick handler in the component itsef like
const TopMenuComponent = () => {
const myHandler = (e) => {console.log('clicked'); // some other code}
return (
<div className={styles.topMenuIndex}>
<header role="banner">
<nav role='navigation'>
<ul>
<li className={styles.expando} onClick={myhandler}>☰</li>
<li>Home</li>
<li>About</li>
</ul>
</nav>
</header>
</div>
)
};