reactjs - State of React child doesn't update after updating parent component -

i try update center prop of child basemap component via parent component. though parent components state gets updated (and read new updated properties in console.log), not passed down child properties.

the last thing tried componentwillreceiveprops method. still doesn't work.

this code:

const google = window.google; let geocoder = new google.maps.geocoder();  class app extends component {   constructor(props) {     super(props);     this.state = {       avatar: '',       username: 'someuse03',       realname: '',       location: '',       followers: '',       following: '',       repos: '',       address: '',       }   }    render() {     return (       <div>         <searchbox fetchuser={this.fetchuser.bind(this)}/>         <card data={this.state} />         <basemap />       </div>     );   }    fetchapi(url) {     fetch(url)       .then((res) => res.json())       .then((data) => {         this.setstate({           avatar: data.avatar_url,           username: data.login,           realname: data.name,           location: data.location,           followers: data.followers,           following: data.following,           repos: data.public_repos,           address: geocoder.geocode({'address': data.location}, function(results, status) {             if (status == 'ok') {               var coords = [];               var results = results.map((i) => {                 i.geometry.location = i.geometry.location                           .tostring()                           .replace(/[()]/g, '')                           .split(', ');                 coords.push(i.geometry.location[0], i.geometry.location[1]);                 results = coords.map((i) => {                   return parseint(i, 10)                 });                 return results;               });             } else {               alert('geocoding not successfull because ' + status)             }           })         })       });   }    fetchuser(username) {     let url = `https://api.github.com/users/${username}`;      this.fetchapi(url);   }    componentdidmount() {     let url = `https://api.github.com/users/${this.state.username}`;      this.fetchapi(url);   }  }  export default app; 

this child component:

basemap extends react.component {         constructor(props) {             super(props);             this.state = {                 center: [41, 21],             }         }          componentwillreceiveprops(nextprops) {             this.setstate({ center: nextprops.address});         }          render() {             return (                 <col md={10} mdpull={1}>                     <div classname="map">                         <googlemap                         bootstrapurlkeys={'aizasybhzwgq3efoiryt70fbjrwasqvwo63mku4'}                         center={this.state.center}                         zoom={11}>                         </googlemap>                     </div>                 </col>             );         }     } 

you fetching inside render method. big no no.
instead in componentdidmount life cycle method

another thing may or may not related problem, arrays reference types, means if mutate them still points same ref in memory. problematic reconciliation , diff algorithm of react determine if state indeed changed.
when want change or return new array use es6 spread operator:

const nextarray = [...nextprops.address] this.setstate({ center: nextarray }); 

edit
ok forgot mention important part here :)
not passing props <basemap /> won't helpful data in componentwillreceiveprops.