gistfile1.js

import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { fetchTodo, updateTodo } from '../actions/index';
import { Link } from 'react-router';

class ShowTodo extends Component {

	static contextTypes = {
		router: PropTypes.object
	};

	constructor(props) {
		super(props);

		this.state = {
			descriptionChanged: false,
			newDescription: this.props.todo.description // This is null when the component is constructed, so the build fails
		};
		

		this.handleDescriptionChange = this.handleDescriptionChange.bind(this);
	}

	componentWillMount() {
		this.props.fetchTodo(this.props.params.id);
	}

	render() {

		console.log('Props: ', this.props.todo.description); //Here it isn't null and contains the proper description

		const { todo } = this.props;

		if (!todo) {
			return (
				<h3>Loading...</h3>
			);
		}

		return (
			<div className="input-group">
				<Link to="/todos_index">Back</Link>
				<h3>Title Goes Here After Database Setup</h3>
				<textarea 
					className="form-control" 
					value={this.state.newDescription}
					onChange={this.handleDescriptionChange}>
				</textarea>
			</div>
		);
	}

	handleDescriptionChange(event) {
		this.setState({
			descriptionChanged: true,
			newDescription: event.target.value
		});
	}

	// handleSave(event) {
	// 	var id = this.props.params.id
	// 	var props = {
	// 		description: event.target.value
	// 	}
	// 	updateTodo(id, props);
	// }
}

function mapStateToProps(state) {
	return { todo: state.todos.todo };
}

export default connect(mapStateToProps, { fetchTodo, updateTodo })(ShowTodo);