Some JSX code to send to Jon

evaluation.js.jsx

var Evaluation = React.createClass({                                                                                                                                                                                                                                                          
  getInitialState: function() {
    return {evaluation: this.props.evaluation};
  },
      
  updateData: function(form, data) {
    var index = this.state.evaluation.indexOf(form);
    var form_data = React.addons.update(this.state.evaluation[index].form,
      { $merge: data });
    form.form = form_data;
    var evaluation = React.addons.update(this.state.evaluation,
      { $splice: [[index, 1, form]] });
    this.replaceState({ evaluation: evaluation });
  },
  
  render: function() {
    return (
      <div className='evaluation'>
        {this.state.evaluation.map(function(form) {
          return (
            <Form form={form} key={form.form_name} 
            participant_id={this.props.evaluation[0].form.id}
            new_participant={this.props.new_participant} handleUpdateData={this.updateData}/>
          )
        }.bind(this))}
      </div>
    );
  } 
  
});

form.js.jsx

var Form = React.createClass({                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       
  startingEditState: function() {
    if(this.props.new_participant === 'true') {
      return true;
    } else {
      return this.props.form.form.id === null;
    };
  },

  getInitialState: function() {
    return {
      edit: this.startingEditState()
    };
  },

  handleToggle: function(e) {
    e.preventDefault;
    this.setState({ edit: !this.state.edit });
  },

  handleCreate: function(e, data) {
    e.preventDefault();
    var railsData = {};
    railsData[this.props.form.form_name] = data;
    $.ajax({
      method: 'POST',
      url: '/' + this.props.form.form_base_route,
      data: railsData,
      success: function(data) {
        this.setState({ edit: false });
        this.props.handleUpdateData(this.props.form, data);
      }.bind(this)
    })
  },

  handleEdit: function(e, data) {
    e.preventDefault();
    var railsData = {};
    railsData[this.props.form.form_name] = data;
    $.ajax({
      method: 'PUT',
      url: '/' + this.props.form.form_base_route + '/' + this.props.form.form.id,
      dataType: 'JSON',
      data: railsData,
      success: function(data) {
        this.setState({ edit: false });
        this.props.handleUpdateData(this.props.form, data);
      }.bind(this)
    })
  },

  handleData: function(e) {
    var data = {};
    this.props.form.form_fields.forEach(function(field) {
      data[field] = ReactDOM.findDOMNode(this.refs[field]).value
    }.bind(this));

    if ( this.props.form.form_name != 'participant') {
      data.participant_id = this.props.participant_id;
    };

    if (this.props.form.form.id === null) {
      this.handleCreate(e, data);
    } else {
      this.handleEdit(e, data);
    }
  },

  formInput: function() {
    return (
    <table className='table table-bordered'>
      <tbody>
        <tr>
          {this.props.form.form_fields.map(function(field) {
            return (
              <td key={field} >
                <input className='form-control' type='text'
                  defaultValue={this.props.form.form[field]} ref={field} />
              </td>
            )
          }.bind(this))}
          <td>
            <a className='btn btn-default' onClick={this.handleData}>UPDATE</a>
            <a className='btn btn-danger' onClick={this.handleToggle}>CANCEL</a>
          </td>
        </tr>
      </tbody>
    </table>
    )
  },

  formRow: function() {
    return (
    <table className='table table-bordered'>
      <tbody>
        <tr>
          {this.props.form.form_fields.map(function(field) {
            return <td key={field}>{this.props.form.form[field]}</td>
          }.bind(this))}
          <td>
            <a className='btn btn-default' onClick={this.handleToggle}>EDIT</a>
          </td>
        </tr>
      </tbody>
    </table>
    )
  },

  renderedForm: function() {
    if (this.state.edit === true) {
      return this.formInput();
    } else {
      return this.formRow();
    }
  },

  render: function() {
    return this.renderedForm();
  }
});

on line 94-95 and 71-72 I am repeating the table and tbody tag and I know it's possible to extract those in to the render function. I wasn't sure exactly how to do that. Every time I tried I as getting bunch of errors. Probably had the syntax wrong somehow.

Can you send me the usage of your Form?

I see you are using a few props. Just wondering what they were so I could do it locally.