title: Passing parameter value from react component
body: <p>In my app, people can comment on pets' images. I am using the react example from <a href="https://github.com/bensmithett/sample-react-rails-app/" rel="nofollow">here</a>, although I changed quite a few stuff. </p>
  
  <p>Right now, it is successful in displaying the existing comments. Now, when a user is creating a comment, I have to pass the comment body, user id, and pet id. I was trying to do the following:</p>
  
  <pre><code>var CommentForm = React.createClass({
  handleSubmit:function()
      {
        var user=this.refs.user_id.getDOMNode().value.trim();
        var comment=this.refs.body.getDOMNode().value.trim();
        var pet_id=this.refs.pet_id.getDOMNode().value.trim();
  
        this.props.onCommentSubmit({comment:comment, user:user, pet:pet_id});
        if(!user||!comment||!pet_id)
          return false;
        var formData = $( this.refs.form.getDOMNode() ).serialize();
        this.props.onCommentSubmit( formData, this.props.form.action );
  
        // reset form
        this.refs.body.getDOMNode().value = "";
      },
  
  render: function () {
  return (
    &lt;form ref="form" className="comment-form" action={ this.props.form.action } accept-charset="UTF-8" method="post" onSubmit={ this.handleSubmit }&gt;
      &lt;p&gt;&lt;input type="hidden" name={ this.props.form.csrf_param } value={ this.props.form.csrf_token } /&gt;&lt;/p&gt;
      &lt;p&gt;&lt;input type="hidden" ref="user" value={ this.props.user_id } /&gt;&lt;/p&gt;
      &lt;p&gt;&lt;input type="hidden" ref="pet_id" value={ this.props.pet_id } /&gt;&lt;/p&gt;
      &lt;p&gt;&lt;textarea ref="body" name="comment[text]" placeholder="Say something..." /&gt;&lt;/p&gt;
      &lt;p&gt;&lt;button type="submit"&gt;Post comment&lt;/button&gt;&lt;/p&gt;
    &lt;/form&gt;
  )
  }
  });
  </code></pre>
  
  <p>And apparently, it doesn't look like it is passing the pet_id correctly, because I am getting the error message </p>
  
  <pre><code>ActiveRecord::RecordNotFound in CommentsController#create
  Couldn't find Pet with 'id'=
  </code></pre>
  
  <p>My CommentsController looks like</p>
  
  <pre><code>def create
      @pet = Pet.find(params[:pet_id])
      @comment = @pet.comments.new(comment_params)
      @comment.user = current_user
  </code></pre>
  
  <p>For further clarification, I have three models, Pets, Users and Comments, and when users make comments, the comment gets the user_id, and pet_id as its parameters. </p>
  
  <p>edit: </p>
  
  <p>My react component looks like</p>
  
  <pre><code> &lt;%= react_component('CommentBox', 
  {:presenter =&gt; @presenter.to_json}, 
  {:prerender =&gt; true}) %&gt;
  </code></pre>
  
  <p>and my PetController looks like</p>
  
  <pre><code>def show
      @comments = @pet.comments
      @user = current_user
      @presenter = {
          :comments =&gt; @comments,
          :user =&gt; current_user,
          :pet_id =&gt; @pet,
          :form =&gt; {
              :action =&gt; comments_path,
              :csrf_param =&gt; request_forgery_protection_token,
              :csrf_token =&gt; form_authenticity_token
        }
  </code></pre>