Executing a function from another JS file within a react component

Question

I want to have a react element on click execute another function from another js file which involves GET requests. How would I go about doing that.

React code:

/** @jsx React.DOM */

var SearchExample = React.createClass({

    getInitialState: function(){
        return { searchString: ' ' };
    },

    handleClick: function(event){
        // do stuff in another file
    },

    handleChange: function(e){

        this.setState({searchString:e.target.value});
    },

    render: function() {

        var libraries = this.props.items,
            searchString = this.state.searchString.trim().toLowerCase();


        if(searchString.length > 0){

            // We are searching. Filter the results.

            libraries = libraries.filter(function(l){
                return l.name.toLowerCase().match( searchString );
            });

        }
        else
        {
            libraries = libraries.filter(function(l){
                return l.popular.toLowerCase().match('true');
            });
        }


        return <div>
                    <input type="text" value={this.state.searchString} onChange={this.handleChange} placeholder="What are you interested in..." />

                    <ul onClick={this.handleClick}> 

                        { libraries.map(function(l){
                            return <li key={l.name}>{l.name} </li>
                        })}

                    </ul>

                </div>;

    }
});

                                                                                                                                                             
var libraries = [

    { name: 'Technology', popular: 'true'},
    { name: 'Fishing', popular: 'true'},
    { name: 'School',  popular: 'true'},
    { name: 'Camping',  popular: 'true'},


];

// Render the SearchExample component on the page

React.render(
    <SearchExample items={ libraries } />,
    document.getElementById('sidebar')
);

Currently the other JS code is in an html file, but I can change that later.

Possible duplicate of http://stackoverflow.com/questions/950087/include-a-javascript-file-in-another-javascript-file — Mark, Aug 28 '15 at 05:48

programmer · Answer 1 · 2015-08-28T05:55:59.833

Pass that function as a prop to SearchExample class

AnotherFile.jsx

var HandleSearch = React.createClass({
   handleSearch: function(a) {
    //your code here
  },
      render: function() {
           return <SearchExample handleClickOnSearch={this.handleSearch} items={ libraries } />
    }
});

search example file

var SearchExample = React.createClass({

getInitialState: function(){
    return { searchString: ' ' };
},

handleClick: function(event){
    this.props.handleClickOnSearch(this.state.searchString);
},

handleChange: function(e){

    this.setState({searchString:e.target.value});
},

render: function() {

    var libraries = this.props.items,
        searchString = this.state.searchString.trim().toLowerCase();


    if(searchString.length > 0){

        // We are searching. Filter the results.

        libraries = libraries.filter(function(l){
            return l.name.toLowerCase().match( searchString );
        });

    }
    else
    {
        libraries = libraries.filter(function(l){
            return l.popular.toLowerCase().match('true');
        });
    }


    return <div>
                <input type="text" value={this.state.searchString} onChange={this.handleChange} placeholder="What are you interested in..." />

                <ul onClick={this.handleClick}> 

                    { libraries.map(function(l){
                        return <li key={l.name}>{l.name} </li>
                    })}

                </ul>

            </div>;

}
});


var libraries = [

{ name: 'Technology', popular: 'true'},
{ name: 'Fishing', popular: 'true'},
{ name: 'School',  popular: 'true'},
{ name: 'Camping',  popular: 'true'},


];

 // Render the SearchExample component on the page

 React.render(
<HandleSearch />,
document.getElementById('sidebar')
);

Executing a function from another JS file within a react component

1 Answers1