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.

Answer 1

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')
);