title: How can i post react and ajax data to rails server?
body: <p>I am developing an application with reactjs on frontend and rails on backend. I am new to rails . I have developed a registration system using reactjs and now i want to post the data to the server. I am not using react-rails gems for this. I dont know what to do next for posting data to server. Could anyone please enlighten me? What should i do now ? Is there anything that i have to provide? 
  P.S I am not using react-rails gem. </p>
  
  <p><strong>My React Code for registration of room (shortened by removing description and some other fields)</strong> </p>
  
  <pre><code>var fieldValues = {
    ownerName:'',
    email:'',
    phoneNumber:'',
    image:[]
  
  }
  
  
  class AddRent extends React.Component{
   constructor(props,context) {
          super(props,context);
          this.state = {
              step: 1
          };
      }
  
    saveValues(field_value) {
      return function() {
        fieldValues = Object.assign({}, fieldValues, field_value)
      }()
      console.log('fieldValues are', fieldValues);
    }
  
  
    nextStep(step) {
      var step = this.state.step;
      var newStep = step+1;
      this.setState({step:newStep});
    }
  
    previousStep(step) {
      var step = this.state.step;
      var newStep = step-1
      this.setState({
        step : newStep
      });
    }
  
  
    showStep() {
    switch (this.state.step) {
      case 1:
        return &lt;RenderPersonalInfo fieldValues={fieldValues}
                              nextStep={this.nextStep.bind(this)}
                              previousStep={this.previousStep.bind(this)}
                              saveValues={this.saveValues.bind(this)} /&gt;
      case 6:
        return &lt;RenderPhotos fieldValues={fieldValues}
                             nextStep={this.nextStep.bind(this)}
                             previousStep={this.previousStep.bind(this)} /&gt;
    }
  }
  
    render() {
      var style = {
        width : (this.state.step / 6 * 100) + '%'
      }
  
      return (
        &lt;main&gt;
          &lt;span className="progress-step"&gt;Step {this.state.step}&lt;/span&gt;
          &lt;progress className="progress" style={style}&gt;&lt;/progress&gt;
          {this.showStep()}
        &lt;/main&gt;
      )
    }
  };
  
  class RenderPersonalInfo extends React.Component{
    render(){
      return(
              &lt;div&gt;
                &lt;h3&gt;Personal Information&lt;/h3&gt;
                &lt;p className="subtitle"&gt;Provide your authentic information so rent seekers can contact you&lt;/p&gt;
                &lt;hr/&gt;
                &lt;div className="col-md-4"&gt;
                  &lt;label htmlFor='name'&gt;Owner Name&lt;/label&gt;
                  &lt;input ref="name" defaultValue={this.props.fieldValues.ownerName} type="textbox" className="form-control" id="name" placeholder="Owner name" /&gt;
                &lt;/div&gt;
                &lt;div className="col-md-4"&gt;
                  &lt;label htmlFor="email"&gt;Email&lt;/label&gt;
                  &lt;input ref="email" defaultValue={this.props.fieldValues.email} type="email" className="form-control" id="email" placeholder="email" /&gt;
                &lt;/div&gt;
                &lt;div className="col-md-4"&gt;
                  &lt;label htmlFor="phoneNumber"&gt;Phone Number&lt;/label&gt;
                  &lt;input ref="phone" defaultValue={this.props.fieldValues.phoneNumber} type="textbox" className="form-control" id="phoneNumber" placeholder="phone number" /&gt;
                &lt;/div&gt;
                &lt;hr/&gt;
                  &lt;div className="row continueBtn text-right"&gt;
                      &lt;button className="btn how-it-works" ref="personalInfo" onClick={this.nextStep.bind(this)}&gt;Continue&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
        );
    }
    nextStep(step){
       var data = {
            ownerName  : this.refs.name.value,
            email : this.refs.email.value,
            phoneNumber: this.refs.phone.value,
          }
          console.log(data.ownerName);
          if ((data.ownerName)&amp;&amp;(data.email)&amp;&amp;(data.phoneNumber)) {
            this.props.saveValues(data);
            this.props.nextStep();
          }
          else{
            alert('please enter the name, email and phone number');
          }
    }
  };
  
   class RenderPhotos extends React.Component {
      constructor(props, context) {
          super(props, context);
          this.state = {
              files: []
          };
      }
  
      onDrop(files) {
        console.log('Received files: ', files);
        this.setState({
            files: files
        });
  
        var image = [];
        image = new FormData(files);
        $.each(files,function(i,file){
          image.append('image',file);
        });
       $.ajax({
        url:"",
        data:image,
        contentType:false,
        processData:false,
        type:'POST',
        mimeType: "multipart/form-data",
        success: function(data) {
          console.log('success');
        }
       });
    }
  
      showFiles() {
          const { files } = this.state;
          console.log('files',files);
  
          if (!files.length) {
              return null;
          }
  
          return (
              &lt;div&gt;
                  &lt;h3&gt;Dropped files: &lt;/h3&gt;
                  &lt;ul className="gallery"&gt;
                      {
                          files.map((file, idx) =&gt; {
                              return (
                                  &lt;li className="col-md-3" key={idx}&gt;
                                      &lt;img src={file.preview} width={200}/&gt;
                                      &lt;div&gt;{file.name}&lt;/div&gt;
                                  &lt;/li&gt;
                              )
                          })
                      }
                  &lt;/ul&gt;
              &lt;/div&gt;
          );
      }
  
      render() {
        return (
             &lt;div&gt;
                  &lt;p&gt;Add photos of spaces to give more insight of your space &lt;/p&gt;
                  &lt;hr/&gt;
                  &lt;div className="col-md-12"&gt;
                  &lt;form method="POST" encType="multipart/form-data"&gt;
                    &lt;Dropzone onDrop={this.onDrop.bind(this)}&gt;
                      Try dropping some files here, or click to select files to upload.
                  &lt;/Dropzone&gt;
                &lt;/form&gt;
                  {this.showFiles()}
                &lt;/div&gt;
                &lt;div className="row continueBtn text-right"&gt;
                      &lt;button className="btn how-it-works pull-left" onClick={this.props.previousStep.bind(this)}&gt;Back&lt;/button&gt;
                      &lt;button className="btn how-it-works" onClick={this.nextStep.bind(this)}&gt;Submit&lt;/button&gt;
                 &lt;/div&gt;
              &lt;/div&gt;
  
        );
      }
  
         nextStep(step){
                    var sendData={'ownerName':this.props.fieldValues.ownerName,
                          'email':this.props.fieldValues.email,
                          'phoneNumber':this.props.fieldValues.phoneNumber,
                        }
                    console.log(sendData.email);
                    $.ajax({
                    url:"",
                    data:sendData,
                    type:'POST',
                    success: function(data) {
                      console.log('success');
                    }
                   });
         }
  
  
  }
  
  export default AddRent;
  </code></pre>
  
  <p><strong>My rooms_controller</strong></p>
  
  <pre><code>class RoomsController &lt; ApplicationController
      def index
          @rooms = Room.all
      end
  
      def new
        @room = Room.new
      end
  
      def create
        @room = Room.new(listing_params)
        respond_to do |format|
          if @room.save
            format.html { redirect_to @room, notice: 'Room was successfully listed.' }
            format.json { render json: @room }
        else
          format.html {render :new}
          format.html {render json:@room.errors}
        end
      end
  
      private
  
      def listing_params
        params.require(:room).permit(:ownerName, :email, :phoneNumber, :listingName, :summary, :property, :room, :price, :city, :place, :water, :amenities, :is_published)
      end
  end
  </code></pre>
  
  <p><strong>Models for room(migration file)</strong></p>
  
  <pre><code>class CreateRooms &lt; ActiveRecord::Migration
    def change
      create_table :rooms do |t|
        t.string :ownerName
        t.string :email
        t.integer :phoneNumber
        t.string :listingName
        t.text :summary
        t.string :property
        t.integer :room
        t.integer :price
        t.string :city
        t.string :place
        t.string :water
        t.string :amenities
        t.boolean :is_published
  
        t.timestamps null: false
      end
    end
  end
  </code></pre>