How to call parents method in React without passing it throught props - reactjs

Question

So i'm building a custom select field. The problem is that the select wrapper and options are different components, so the code for creating such select will be:
<SelectComponent onChange={usersFunction}>
<OptionComponent value="value 1" />
<OptionComponent value="value 2" />
<OptionComponent value="value 3" />
</SelectComponent>
More specifically the problem is that i don't know how to let the SelectComponent know when the option was clicked and witch option was clicked (i don't want to pass any other functions into the code above. I want it only to have onChange function).
What i'm doing right now is in SelectComponent render function i'm wrapping each child in props.children into another div witch has onClick property.
Something like this:
render() {
return {
this.props.children.map(function(item, index){
return (
<div key={index} onClick={this.handleClickMethod.bind(this, item, index)}>{item}</div>
)
})
}
}
Although this is kind of working i'm not really satisfied with the solution. May be there are any other more "react" solutions?

Answer 1

You can use React.cloneElement() to add additional props to children, like so:
render() {
let self=this;
return (
{self.props.children.map(child, index) => {
return React.cloneElement(child, {
onClick: self.handleClickMethod.bind(self, child, index)
})
})}
)
}
Then you can add the handler to the props, without the additional wrapper <div>
UPDATE: Alternatively, you can simply pass the options as an array (instead of as children), like so:
<SelectComponent onChange={usersFunction} options={['value 1','value 2', 'value 3']}>
And build your options component dynamically.
From the official page (on context in react):
We're fond of simply passing the items as an
array

Answer 2

You can do something like,
import React from 'react'
import ReactDOM from 'react-dom'
class OptionComponent extends React.Component{
constructor(props) {
super(props);
}
handleClick(){
this.props.handler(this.props.index);
}
render() {
return (
<div className={this.props.isChecked ? "optionbtn selected" : "optionbtn"} onClick={this.handleClick.bind(this)} data-value={this.props.value}>
<label>{this.props.text}</label>
</div>
);
}
}
class SelectComponent extends React.Component{
constructor() {
super();
this.state = {
selectedIndex: null,
selectedValue: null,
options: ["Option 0","Option 1","Option 2","Option 3"]
};
}
toggleRadioBtn(index){
if(index == this.state.selectedIndex)
return;
this.setState({
selectedIndex: index,
selectedValue: this.state.options[index],
options: this.state.options
});
this.props.onChange.call(this.state.options[index]);
}
render() {
const { options } = this.state;
const allOptions = options.map((option, i) => {
return <OptionComponent key={i} isChecked={(this.state.selectedIndex == i)} text={option} value={option} index={i} handler={this.toggleRadioBtn.bind(this)} />
});
return (
<div data-value={this.state.selectedValue}>{allOptions}</div>
);
}
}
var app = document.getElementById('app');
ReactDOM.render(<SelectComponent onChange={usersFunction}/>, app);

Answer 3

Make method available via context. Require that method in child component and call it.
https://facebook.github.io/react/docs/context.html
Redux is based on this principle.