Peter3 Peter3 - 8 months ago 84
React JSX Question

React es5 vs es6

I have been trying to learn React with Redux the past couple of weeks. I can't seem to pass down an action as a property correctly as when I run it I get a "cannot read property "props" of null. However finding some code online I was able to try it out using es5 syntax and it worked. Does anyone understand what I am doing wrong in es6 and how I can make it work? Below is my attempt at es6 which does not work with the es5 style commented out which does work.

import React, { Component, PropTypes } from 'react'

export default class InputFoo extends Component {
//export default React.createClass({

const { inputFooAction } = this.props


render() {
const { input } = this.props
return (<div>
<h1>Oh hey from inside the component {input}</h1>
<form onSubmit={this.submitHandler}>
<input type="text" id="theInput"/>

}// )

//block below is commented out for es5
InputFoo.propTypes = {
inputFooAction: PropTypes.func,
input: PropTypes.string


I've prepared a demo for you here:

There is no autobinding ES6 classess so your onSubmit event needs to be handled as follows:

<form onSubmit={this.submitHandler.bind(this)}>