Cannot read property 'toObject' of undefined when trying to call a func property - ecmascript-6

Question

This is my component
class MyComponent extends Component {
render () {
const { action } = this.props;
action();
return (<div>Done!</div>);
}
MyComponent.propTypes = {
action: PropTypes.func.isRequired
}
And here is the relevant code of a container:
doSomething () {
...
}
render() {
return (
<MyComponent
action={doSomething}
/>
)
}
When I bring up this code in a browser, I got this error message:
Uncaught TypeError: Cannot read property 'toObject' of undefined
Business logic should live in container so I do not want to copy and paste the code of action into MyComponent.
So my question is: how can I call a function passed in via properties directly in a render method?

Answer 1

I think, issue is in this place:
doSomething () {
...
}
render() {
return (
<MyComponent
action={doSomething} //here
/>
)
}
It should be:
doSomething () {
...
}
render() {
return (
<MyComponent
action={this.doSomething}
/>
)
}
You need to use this.doSomething instead of doSomething.
Check the working example:
class App extends React.Component{
constructor(){
super();
}
doSomething(){
console.log('called');
}
render(){
return(
<div>
Hello
<Child action={this.doSomething}/>
</div>
)
}
}
var Child = (props) => {
const {action} = props
action();
return(
<div>Child</div>
)
}
ReactDOM.render(<App/>, document.getElementById('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'/>