adding jquery to react starter kit

Question

I'm new to Javascript world and starting some to create a simple React Project I started With React Starter Kit and added my first module whch is a simple upload file:

UploadFile.

import React, { Component, PropTypes } from 'react';
import FormData from 'form-data';
import $ from 'jquery';

class UploadPanel extends Component {
  state = {
    file:'',
  };
  uploadSelectedFile() {

    // Add the uploaded image content to the form data collection
    var data = new FormData();
    data.append("image", this.state.file);
    data.append("temp", 'temp');
    $.ajax({
      method: "POST",
      url: "rest/dicom/upload",
      xhr: function () {  // Custom XMLHttpRequest
        var myXhr = $.ajaxSettings.xhr();
        return myXhr;
      },
      cache: false,
      data: data,
      contentType: false,
      processData: false,
      success: function (data) {
        alert('file sent');
        console.log(data);
      },
      error: function (data) {
        alert('error');
        console.log(data);
      }
    });
  }
  handleFileChange(e){
    let file = e.target.files;
    if(file.length>0)
      this.setState({file: file});
    else
      this.setState({file: ''});
  }

  render() {
    //return <p> hi this is a test </p>
    //var createItem = function (item) {
    //  return <li key={item.id}>{item.text}</li>;
    //};

    return <form onSubmit={this.uploadSelectedFile()}>
      <input type="file" name="image" id="image" value={this.state.file} onChange={this.handleFileChange}/>
      <input type="submit" value="ارسال"  disabled={this.state.file!=''}/>
    </form>;
  }
}


export default UploadPanel;

but when i open the page, the compile (in the server) gives the following error:

TypeError: _jquery2.default.ajax is not a function
at UploadPanel.uploadSelectedFile (D:\Projects\Behyaar\BOIS\ReactDashboardClient\build\webpack:\src\components\bois\UploadDicom\UploadPanel.js:24:7)
at UploadPanel.render (D:\Projects\Behyaar\BOIS\ReactDashboardClient\build\webpack:\src\components\bois\UploadDicom\UploadPanel.js:59:33)
at ReactCompositeComponentMixin._renderValidatedComponentWithoutOwnerOrContext (D:\Projects\Behyaar\BOIS\ReactDashboardClient\node_modules\react\lib\ReactCompositeComponent.js:587:34)
at ReactCompositeComponentMixin._renderValidatedComponent (D:\Projects\Behyaar\BOIS\ReactDashboardClient\node_modules\react\lib\ReactCompositeComponent.js:607:32)
at wrapper [as _renderValidatedComponent] (D:\Projects\Behyaar\BOIS\ReactDashboardClient\node_modules\react\lib\ReactPerf.js:66:21)
at ReactCompositeComponentMixin.mountComponent (D:\Projects\Behyaar\BOIS\ReactDashboardClient\node_modules\react\lib\ReactCompositeComponent.js:220:30)
at wrapper [as mountComponent] (D:\Projects\Behyaar\BOIS\ReactDashboardClient\node_modules\react\lib\ReactPerf.js:66:21)
at Object.ReactReconciler.mountComponent (D:\Projects\Behyaar\BOIS\ReactDashboardClient\node_modules\react\lib\ReactReconciler.js:37:35)
at ReactDOMComponent.ReactMultiChild.Mixin.mountChildren (D:\Projects\Behyaar\BOIS\ReactDashboardClient\node_modules\react\lib\ReactMultiChild.js:241:44)
at ReactDOMComponent.Mixin._createContentMarkup (D:\Projects\Behyaar\BOIS\ReactDashboardClient\node_modules\react\lib\ReactDOMComponent.js:591:32)
at ReactDOMComponent.Mixin.mountComponent (D:\Projects\Behyaar\BOIS\ReactDashboardClient\node_modules\react\lib\ReactDOMComponent.js:479:29)
at Object.ReactReconciler.mountComponent (D:\Projects\Behyaar\BOIS\ReactDashboardClient\node_modules\react\lib\ReactReconciler.js:37:35)
at ReactCompositeComponentMixin.mountComponent (D:\Projects\Behyaar\BOIS\ReactDashboardClient\node_modules\react\lib\ReactCompositeComponent.js:225:34)
at wrapper [as mountComponent] (D:\Projects\Behyaar\BOIS\ReactDashboardClient\node_modules\react\lib\ReactPerf.js:66:21)
at Object.ReactReconciler.mountComponent (D:\Projects\Behyaar\BOIS\ReactDashboardClient\node_modules\react\lib\ReactReconciler.js:37:35)
at ReactDOMComponent.ReactMultiChild.Mixin.mountChildren (D:\Projects\Behyaar\BOIS\ReactDashboardClient\node_modules\react\lib\ReactMultiChild.js:241:44)

can anyone help? why it wants to run a client side code in the server?

Answer 1

In your render function, you've made a slight mistake with the syntax (one that I think catches everyone out in React to begin with, especially if they're coming from other frameworks). Look at this line:

return <form onSubmit={this.uploadSelectedFile()}> ... </form>

You have brackets at the end of your function name - in other words, you're calling the function every time the render function runs, including on the server!

The best way to demonstrate is to translate the JSX to what JavaScript will actually get run:

return React.createElement("form", { onSubmit: this.uploadSelectedFile() });

You're setting the onSubmit property to the return value of this.uploadSelectedFile, rather than the function itself.

There's two things you need to fix - first, remove the brackets from the end of the previously mentioned statement. The second thing is a little less obvious - as you're using ES6 classes, you need to be explicit about binding your functions to the correct this value:

class UploadPanel extends Component {
    ...
    constructor() {
        super();
        this.uploadSelectedFile = this.uploadSelectedFile.bind(this);
        this.handleFileChange = this.handleFileChange.bind(this);
    }
    ...
}

There's also more elegant ways of doing this with arrow functions if you're using the stage-0 Babel preset.

Hopefully that cleared things up for you a bit!