title: In React-Rails app, passing instance variables from controller to component (and back)
body: <p>I am creating a React-Rails app, using ES6, and I am having difficulty passing data from the controller to the component (and back). </p>
  
  <p>My app includes a record form that pushes the newly created record to the records component.</p>
  
  <p>The code within my Records controller is:</p>
  
  <pre><code>class RecordsController &lt; ApplicationController
      def index
          @records = Record.all
      end
  
      def create
          @record = Record.new(record_params)
  
          if @record.save
              render json: @record
          else 
              render json: @record.errors, status: :unprocessable_entity
          end
  
      end
  
  
      private
          def record_params
              params.require(:record).permit(:title, :date, :amount)
          end
  
  end
  </code></pre>
  
  <p>The code for Records component is:</p>
  
  <pre><code>class Records extends React.Component {
      constructor (props) {
          super(props);
  
      }
      componentWillMount () {
          var records = this.records;
          this.state = {records: records};
      }
      addRecord (record) {
          var records;
          records = this.state.records;
          records.push(record);
          this.setState({records: records});
      }
        render () {
          var records = this.records.map(function(record) {
                          return &lt;Record key={record.id} data={record} /&gt;;
                          });
  
          return (        
                  &lt;div&gt;
                      &lt;h2&gt;Records&lt;/h2&gt;
                      &lt;RecordForm handleNewRecord={this.addRecord()} /&gt;
                      &lt;table&gt;
                          &lt;thead&gt;
                              &lt;tr&gt;
                                  &lt;th&gt;Title&lt;/th&gt;
                                  &lt;th&gt;Date&lt;/th&gt;
                                  &lt;th&gt;Amount&lt;/th&gt;
                              &lt;/tr&gt;
                          &lt;/thead&gt;
                          &lt;tbody&gt;
                              {records}
                          &lt;/tbody&gt;
                      &lt;/table&gt;
                  &lt;/div&gt;
          );
        }
  }
  </code></pre>
  
  <p>The code for the Record Form component is: </p>
  
  <pre><code>class RecordForm extends React.Component {
    constructor (props) {
      super (props);
      this.state = {
        title: "",
        date: "",
        amount: ""
      }
      this.handleNewRecord = this.props.handleNewRecord.bind(this);
      this.handleChange = this.handleChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
    }
  
    handleChange (e) {
      var stateObject = function() {
        returnObj = {};
        returnObj[this.target.name] = this.target.value;
           return returnObj;
      }.bind(e)();
  
      this.setState( stateObject ); 
      }
  
    handleSubmit (e) {
      e.preventDefault();
      $.ajax({
        type: 'POST',
        url: '',
        data: {record: this.state},
        success: function (data) {
                    this.props.handleNewRecord();
                    this.setState({title: "", date: "", amount: ""})
                },
        dataType: 'JSON'
      });
    }
    render () {
      return (
            &lt;form className="form-inline" onSubmit={this.handleSubmit} &gt;
              &lt;div className="form-group"&gt;
                &lt;input  
                  type="text" 
                  className="form-control text" 
                  placeholder="Date"
                  name="date"
                  value={this.state.date}
                  onChange={this.handleChange}
                /&gt;
                &lt;/div&gt;
              &lt;div className="form-group"&gt;
                &lt;input  
                  type="text" 
                  className="form-control" 
                  placeholder="Title"
                  name="title"
                  value={this.state.title}
                  onChange={this.handleChange}
                /&gt;
              &lt;/div&gt;
              &lt;div className="form-group"&gt;
                &lt;input  
                  type="text" 
                  className="form-control" 
                  placeholder="Amount"
                  name="amount"
                  value={this.state.amount}
                  onChange={this.handleChange}
                /&gt;
              &lt;/div&gt;
              &lt;input 
                  type="submit" 
                  value="Create Record"
                  className="btn btn-primary"
              /&gt;
            &lt;/form&gt;
      );
    }
  }
  </code></pre>
  
  <p>The code for the Record component is:</p>
  
  <pre><code>class Record extends React.Component {
    render () {
      return (
        &lt;tr&gt;
          &lt;td&gt;&lt;em&gt;{this.props.data.title}&lt;/em&gt;&lt;/td&gt;
          &lt;td&gt;{this.props.data.date}&lt;/td&gt;
          &lt;td&gt;{this.props.data.amount}&lt;/td&gt;
        &lt;/tr&gt;
      );
    }
  }
  </code></pre>
  
  <p>When I run this code, I receive the following error regarding the render method in the Records component: </p>
  
  <blockquote>
    <p>Uncaught TypeError: Cannot read property 'map' of undefined</p>
  </blockquote>
  
  <p>I apologize for the length of this question, but I have been working on it for a while and I am frankly flummoxed.</p>
  
  <p>Does anyone have an idea why this not working? I completely appreciate any advice anyone can provide. Thanks!</p>