Handle click outside of return - reactjs

Question

I have a click that calls the setmenu function (in the className="menu" list) but I dont want to repeat it in my 3 different returns. Instead I want to put it into its own function/component and call it 3 times.
However when I move it the click cant find setmenu anymore, even though I still have this.setmenu = this.setmenu.bind(this); in the constructor?
setmenu(event, value){
this.setState({showForm: value});
console.log(this.state.showForm, "this.state.showForm")
}
render() {
const showForm = this.state.showForm;
if (showForm === 1){
return (
<div>
<ul className="menu">
<li><a href="javascript:void(0)" onClick={e => this.setmenu(e, 1)}>Form 1</a></li>
<li><a href="javascript:void(0)" onClick={e => this.setmenu(e, 2)}>Form 2</a></li>
<li><a href="javascript:void(0)" onClick={e => this.setmenu(e, 3)}>Form 3</a></li>
</ul>
<FacebookLoginForm value={this.state.facebookResponse} />
</div>
);
}
else if(showForm === 2) {
return (
<div>
<ul className="menu">
<li><a href="javascript:void(0)" onClick={e => this.setmenu(e, 1)}>Form 1</a></li>
<li><a href="javascript:void(0)" onClick={e => this.setmenu(e, 2)}>Form 2</a></li>
<li><a href="javascript:void(0)" onClick={e => this.setmenu(e, 3)}>Form 3</a></li>
</ul>
<ManualLoginForm />
</div>
);
}
else if (showForm === 3){
return (
<div>
<ul className="menu">
<li><a href="javascript:void(0)" onClick={e => this.setmenu(e, 1)}>Form 1</a></li>
<li><a href="javascript:void(0)" onClick={e => this.setmenu(e, 2)}>Form 2</a></li>
<li><a href="javascript:void(0)" onClick={e => this.setmenu(e, 3)}>Form 3</a></li>
</ul>
<ManualRegForm />
</div>
)
}
}

Answer 1

Some variations about #wostex answer
lets read additional parameters from href attribute instead of calling handler with additional arguments
event should be prevent by event API instead of old days construction href="javascript:void(0)"
Links container can support as many as needed links inside itself
function Links(props) {
return (
<div>
<ul className="menu">
{props.children.map((e, key) => <li key={key} onClick={props.clickHandler}>{e}</li>)}
</ul>
</div>
);
}
class App extends React.Component {
constructor() {
super()
this.setmenu = this.setmenu.bind(this);
}
setmenu(event, value){
event.preventDefault();
console.log('setmenu: ', event.target.getAttribute('href'))
}
render() {
return (
<Links clickHandler={this.setmenu}>
Form 3
Form 2
</Links>
);
}
}
ReactDOM.render(<App/>,
document.querySelector('#app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app">Loading...</div>

Answer 2

Working example: https://jsfiddle.net/wostex/4wcdL6dw/3/
Just pass your function as a prop.
function ThreeLinks(props) {
return (
<div>
<ul className="menu">
<li><a href="javascript:void(0)" onClick={(e) => props.clickHandler(e, 1)}>Form 1</a></li>
<li><a href="javascript:void(0)" onClick={(e) => props.clickHandler(e, 2)}>Form 2</a></li>
<li><a href="javascript:void(0)" onClick={(e) => props.clickHandler(e, 3)}>Form 3</a></li>
</ul>
</div>
);
}
class App extends React.Component {
setmenu(event, value){
console.log('setmenu: ', event, value)
}
render() {
return (
<ThreeLinks clickHandler={this.setmenu.bind(this)} />
);
}
}