javascript - Ajax call not working on search query -


i have github profile viewer react application allows search profile username. in default state have provided own github username landing page own github profile. can search profile entering name in search bar, ajax call not working whenever try search user, same function returning valid data own username. error getting follows:-

uncaught typeerror: $.ajax not function

my main app.jsx class follows

class app extends component{      constructor(props){         super(props);         this.state = {             username: 'kinny94',             userdata: [],             userrepos: [],             perpage: 5          }      }      getuserdata(){         $.ajax({             url: 'https://api.github.com/users/' + this.state.username + '?client_id=' + this.props.clientid + '&client_secret=' + this.props.clientsecret,             datatype: 'json',             cache: false,             success: function(data){                 this.setstate({                     userdata: data                 });                 console.log(data);             }.bind(this),             error: function(xhr, status, err){                 this.setstate({                     username: null                 });                 alert(err);             }.bind(this)          });     }      getuserrepos(){         $.ajax({             url: 'https://api.github.com/users/' + this.state.username + '/repos?per_page='+ this.state.perpage +'client_id=' + this.props.clientid + '&client_secret=' + this.props.clientsecret + '&sort=created',             datatype: 'json',             cache: false,             success: function(data){                 this.setstate({                     userrepos: data                 });             }.bind(this),             error: function(xhr, status, err){                 this.setstate({                     username: null                 });                 alert(err);             }.bind(this)         });     }      handleformsubmit(username){         this.setstate({             username: username         }, function(){             this.getuserdata();             this.getuserrepos();         })     }      componentdidmount(){         this.getuserdata();         this.getuserrepos();     }      render(){         return(             <div>                 <search onformsubmit={this.handleformsubmit.bind(this)}/>                 <profile {...this.state}/>             </div>         )     } }  export default app; 

and search file follows

class search extends component{      onsubmit(e){         e.preventdefault();         let username = this.refs.username.value.trim();         if(!username){             alert('please enter username!');             return;         }          this.props.onformsubmit(username);         this.refs.username.value = '';     }      render(){         return(             <div>                 <form onsubmit={this.onsubmit.bind(this)}>                     <label>search github users </label>                     <input type="text" ref="username" classname="form-control" />                 </form>              </div>         )     } } 

my question is, if same ajax call working username, why isn't working of new random username.

you have include jquery script in html.

something in html:

<script src="jquery-3.2.1.min.js"></script> 

Comments

Popular posts from this blog

minify - Minimizing css files -

neo4j - finding mutual friends in a cypher statement starting with three or more persons -

php - How to remove letter in front of the word laravel -