CODEWITHSUNDEEP
javascriptjqueryreactjsjquery-plugins
MHF
MHF

Reputation: 221

TypeError in using React app with jquery plugins

I created an app with react-create-app command and i use the react 16. i want to use katrik-v fileinput (a jquery plugin) too. that is my code:

import React, { Component } from 'react';
import { Grid, Cell }  from 'react-foundation';
import Header from './Heaader';
import $, { jQuery } from 'jquery';

class New extends Component {

componentDidMount(){
    $(document).find('#root').find('#test-upload').fileinput();
}


render(){
    return (
        <div>
          <Grid type="x">
               <Cell medium={2} large={2} >
                    <label htmlFor="image" className="text-right middle">
                           <p className="form-label">Images</p></label>
               </Cell>
               <Cell medium={8} large={8}>
                    <div className="file-loading">
                        <input id="test-upload" ref='fff' type="file" 
                        multiple />
                    </div>
               </Cell>
         </Grid>
      </div>)
}
}
export default New;

When I call it in the index.js:

ReactDOM.render(<App />, document.getElementById('root'));

I'm facing this error:

TypeError: __WEBPACK_IMPORTED_MODULE_4_jquery___default(...)(...).find(...).find(...).fileinput is not a function.
$(document).find('#root').find('#test-upload').fileinput()

what is the problem?
In general, how can these two be merged?(a jquery plugin and react app)

Upvotes: 0

Views: 147

Answers (1)

user5734311
user5734311

Reputation:

In order to use jQuery plugins with React apps, you should pull jQuery out of the webpack process.

Include jQuery and the plugins as static files or via CDN using <script> tags in your public/index.html.

To use jQuery in your React files, add

/* global $ */

to your class files as if it were an import line.

Upvotes: 1

Related Questions