Matthew Hartz Matthew Hartz - 18 days ago 7
React JSX Question

this.context empty object when using react-redux

I'm implementing the code example from http://x-team.com/2016/02/tutorial-forms-in-react-and-redux/ into my codebase. Unfortunately, I'm getting an empty object for this.context.

Here is some of my code. Router routes to a login component that contains both Form and Text. Let me know if anything needs to be clearer, i'm very new to React.

Thanks!

export const MakeMainRoutes = (props) => {
return (
<Router history={browserHistory}>
<Route path="/" component={Container} auth={auth}>
<IndexRedirect to="/home" />
<Route path="home" component={Home} onEnter={requireAuth} />
<Route path="login" component={Login} onEnter={parseAuthHash} />
</Route>
</Router>
)
}

export default MakeMainRoutes

class Form extends React.Component {
static propTypes = {
children: PropTypes.node,
values: PropTypes.object,
update: PropTypes.func,
reset: PropTypes.func,
onSubmit: PropTypes.func
}

static childContextTypes = {
update: PropTypes.func,
reset: PropTypes.func,
submit: PropTypes.func,
values: PropTypes.object
}

getChildContext() {
return {
update: this.props.update,
reset: this.props.reset,
submit: this.submit,
values: this.props.values
};
}

render() {
return (
<form>
{this.props.children}
</form>
)
}
}

export default Form

import React, { PropTypes } from 'react';
import TextField from 'material-ui/TextField';
import * as validators from '../../libs/validators'

class Text extends React.Component {
static propTypes = {
name: PropTypes.string.isRequired,
placeholder: PropTypes.string,
label: PropTypes.string
};

static contextTypes: {
update: PropTypes.func.isRequired,
values: PropTypes.object.isRequired
};

updateValue(value) {
this.context.update(this.props.name, value);
}

onChange(event) {
this.updateValue(event.target.value)
}

render() {
return (
<div>
<TextField
hintText={this.props.placeholder}
floatingLabelText={this.props.label}
value={this.context.values[this.props.name]}
onChange={this.onChange}/>
</div>
)
}
}

export default Text

Answer

Typo:

static contextTypes: {

==>

static contextTypes = {