javascript - Double setState method in one function -


i trying create autocomplete component. it's input user types countru name , if letters match name of country, hints displayed. in app component have method handlechange within method change state 2 times, bad idea. how can split change state in distinct methods ?

import react, { component } 'react'; import autocomplete './autocomplete.jsx'; import data './data.json';  class app extends component {   constructor(props) {     super(props);     this.state = {       inputvalue: '',       resoults: []     }   }    handlechange() {     let inputvalue = this.refs.input.value;     this.setstate({       inputvalue: inputvalue     });        let regular = "^" + this.state.inputvalue;       let reg = new regexp(regular , "i");       let filtered = data.filter((i,index)=> {       return (reg.test(i.name)         );     });     console.log(filtered);           this.setstate({resoults:filtered})   }    render() {     return (       <div>         <input onchange={this.handlechange.bind(this)} type="text" ref="input"/>         <h3>you typed: {this.state.inputvalue}</h3>         <autocomplete resoults={this.state.resoults} />       </div>       );   }  }  export default app;  import react, {component} 'react';  class autocomplete extends component {       render() {         return (             <div>                 <h4>autocompletecomponent</h4>                 {this.props.resoults.map((i)=> {                     return (                         <ul>                             <li>{i.name}</li>                         </ul>                     );                 })}             </div>         );     } }  export default autocomplete;

i found myself in position many times, got conclusion it's better compute autocomplete options (in case) without having them in state of component.

as have used them until now, state , props of component should represent minimal data needed render specific component. since have input value in state, having autocomplete options there seems redundant me. here propose:

class app extends component {   this.state = {     inputvalue: '',   };    handlechange(e) {     const inputvalue = e.target.value;     this.setstate({       inputvalue,     });   }    computeresults() {     const {inputvalue} = this.state;     // functionality computing results here   }    render() {     const {inputvalue} = this.state;     const results = this.computeresults();      return (       <div>         <input type="text" onchange={this.handlechange.bind(this)} value={inputvalue} />         <h2>you typed: {inputvalue}</h2>         <autocomplete results={results} />       </div>     );   } }

notes

  1. since results come synchronously, via .json import, seems perfect solution me. if want them via fetch or else, you'll have figure out different approach, keep in mind state of component should not contain redundant data.
  2. stop using ref string value! , use refs when there absolutely no other way because react component should not deal dom operations directly. if need use refs, use ref callbacks.

hope helps!


Comments

Post a Comment

Popular posts from this blog

What is happening when Matlab is starting a "parallel pool"? -

running parallel cpu processes in matlab starts command parpool() according documentation , function: [creates] special job on pool of workers, , [connects] matlab client parallel pool. this function takes bit of time execute, on order of 30 seconds. in other multi-cpu paradigms openmp, parallel execution seems totally transparent -- i've never noticed behavior analogous matlab (granted i'm not experienced parallel programming). so, happening between time parpool() called , when finishes executing? takes long? parallel computing toolbox enables run matlab code in parallel using several different paradigms (e.g. jobs , tasks, parfor , spmd , parfeval , batch processing), , run either locally (parallelised across cores in local machine) or remotely (parallelised across machines in cluster - either 1 own, or 1 in cloud). in of these cases, code run on matlab workers , copies of matlab without interactive desktop. if you're intending run on remo...
Read more

angular - DownloadURL return null in below code -

when change file updated in firebase storage when try downloadurl show null. filechange(event: any) { const imagefolder: string = this.employee.id; const filelist: filelist = event.target.files; const file: file = filelist[0]; const storageref = firebase.storage().ref().child(`${imagefolder}/profile.jpg`).put(file); console.log(storageref.snapshot.downloadurl); } the put() asynchronous. if want url after file uploaded have this: firebase.storage().ref().child(`${imagefolder}/profile.jpg`).put(file).then((snapshot) => { storageref = snapshot.downloadurl: console.log(snapshot.downloadurl); });
Read more

php - Cannot override Laravel Spark authentication with own implementation -

during login process of laravel spark need request token of remote api. api stores exact same users , passwords laravel spark application. therefore need username , non hashed password of user during authentication process. i thought overriding authenticated method solution problem. in routes/web.php override post /login endpoint , pointing endpoint own logincontroller: <?php namespace app\http\controllers\auth; use illuminate\support\facades\log; use illuminate\http\request; use laravel\spark\http\controllers\auth\logincontroller sparklogincontroller; class logincontroller extends sparklogincontroller { /** * create new login controller instance. * * @return void */ public function __construct() { parent::__construct(); } /** * handle successful authentication attempt. * * @param request $request * @param \illuminate\contracts\auth\authenticatable $user * @return response */ public fu...
Read more