Styjun

is it possible for a vehicle to be manufactured witout a catalitic converter

Fixing obscure 8080 emulator bug?

How can I get an unreasonable manager to approve time off?

Is White controlling this game?

Why can't I use =default for default ctors with a member initializer list

What's up with this leaf?

Why didn't Voldemort recognize that Dumbledore was affected by his curse?

Implement Own Vector Class in C++

How is John Wick 3 a 15 certificate?

Does Disney no longer produce hand-drawn cartoon films?

How do governments keep track of their issued currency?

1980s live-action movie where individually-coloured nations on clouds fight

Extreme flexible working hours: how to control people and activities?

What is the actual quality of machine translations?

CROSS APPLY produces outer join

Can Rydberg constant be in joules?

What makes Ada the language of choice for the ISS's safety-critical systems?

Mathematically, why does mass matrix / load vector lumping work?

Inward extrusion is not working

Group Integers by Originality

What can I, as a user, do about offensive reviews in App Store?

How to hide rifle during medieval town entrance inspection?

Winning Strategy for the Magician and his Apprentice

Rebus with 20 song titles

Passing props in child component from state of parent component

Pass props to parent component in React.jsHow to pass props to this.props.childrenGetting a child's default props to set the state in the parent in ReactJSComponent state in ReactJSreact pass props from child to parent undefinedPassing onClick function as props to child component and using it to change parent component stateUpdate the state from child to parent component in ReactPass state to another components function with propsReact, updating state in child component using props after async call in parent componentReact: How do I pass a returned function value to a parent component?

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

0

I am unable to use the state from Parent Component to child component on Google Maps component. This may sound a very basic question, however I am trying to understand the difference between one of props working and other not.

So I have a google maps component (import GoogleMapReact from 'google-map-react')

static defaultProps = 
 center: lat: 62.10281, lng: -84.14565 ,
 zoom: 11
 ;

 constructor(props) 
 console.log(props); 
 super(props);
 

 render() 

 return (
 <div className='google-map' style= height: '100%', width: '100%' >
 <GoogleMapReact
 bootstrapURLKeys= key: 'somekey' 
 center=this.props.center
 defaultZoom= this.props.zoom >
 <AnyReactComponent
 lat= this.props.lat 
 lng= this.props.lng 
 text= 'Wheres Waldo?' 
 />
 </GoogleMapReact>
 </div>
 )
 

and then from parent component

<MapComponent lat=this.state.latitude lng=this.state.longitude
 center=lat: this.state.latitude, lng: this.state.longitude

I have checked the value to lat, lng and center in constructor and I am getting them as expected still map doesn't work

However, If I hardcode the value in center leaving the lat and lng getting value from state, then it does work.

Now this works, Can someone please explain this concept and the difference and how to overcome it? Your help is appreciated.

<MapComponent lat=this.state.latitude lng=this.state.longitude
 center=lat: 62.10281, lng: -84.14565

reactjs

share|improve this question

edited Mar 24 at 19:25

Raj

asked Mar 24 at 18:11

RajRaj

107210

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Put console.log(this.props); into the render function before the return block. Tell us what's in the console in both of your testcases.
  
  – xDreamCoding
  Mar 24 at 18:39
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I am getting the values I expect center: lat: "62.10281", lng: "-84.14565" lat: "62.10281" lng: "-84.14565" zoom: 11
  
  – Raj
  Mar 24 at 19:26
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  So the values are exactly the same in both cases hardcoded and from parent.state? Is there any error thrown?
  
  – xDreamCoding
  Mar 24 at 19:33
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  No error in console. That is I find strange and assumed I don't know some core concept. Is Child component rendered before this value is mapped. Just a note that the values coming from parent component are coming from an API, so possible that when child component is rendered, the values were not present. However, console log clearly state the values being logged.
  
  – Raj
  Mar 25 at 6:46
  

  
  
  
  

add a comment | 

0

I am unable to use the state from Parent Component to child component on Google Maps component. This may sound a very basic question, however I am trying to understand the difference between one of props working and other not.

So I have a google maps component (import GoogleMapReact from 'google-map-react')

static defaultProps = 
 center: lat: 62.10281, lng: -84.14565 ,
 zoom: 11
 ;

 constructor(props) 
 console.log(props); 
 super(props);
 

 render() 

 return (
 <div className='google-map' style= height: '100%', width: '100%' >
 <GoogleMapReact
 bootstrapURLKeys= key: 'somekey' 
 center=this.props.center
 defaultZoom= this.props.zoom >
 <AnyReactComponent
 lat= this.props.lat 
 lng= this.props.lng 
 text= 'Wheres Waldo?' 
 />
 </GoogleMapReact>
 </div>
 )
 

and then from parent component

<MapComponent lat=this.state.latitude lng=this.state.longitude
 center=lat: this.state.latitude, lng: this.state.longitude

I have checked the value to lat, lng and center in constructor and I am getting them as expected still map doesn't work

However, If I hardcode the value in center leaving the lat and lng getting value from state, then it does work.

Now this works, Can someone please explain this concept and the difference and how to overcome it? Your help is appreciated.

<MapComponent lat=this.state.latitude lng=this.state.longitude
 center=lat: 62.10281, lng: -84.14565

reactjs

share|improve this question

edited Mar 24 at 19:25

Raj

asked Mar 24 at 18:11

RajRaj

107210

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Put console.log(this.props); into the render function before the return block. Tell us what's in the console in both of your testcases.
  
  – xDreamCoding
  Mar 24 at 18:39
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I am getting the values I expect center: lat: "62.10281", lng: "-84.14565" lat: "62.10281" lng: "-84.14565" zoom: 11
  
  – Raj
  Mar 24 at 19:26
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  So the values are exactly the same in both cases hardcoded and from parent.state? Is there any error thrown?
  
  – xDreamCoding
  Mar 24 at 19:33
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  No error in console. That is I find strange and assumed I don't know some core concept. Is Child component rendered before this value is mapped. Just a note that the values coming from parent component are coming from an API, so possible that when child component is rendered, the values were not present. However, console log clearly state the values being logged.
  
  – Raj
  Mar 25 at 6:46
  

  
  
  
  

add a comment | 

I am unable to use the state from Parent Component to child component on Google Maps component. This may sound a very basic question, however I am trying to understand the difference between one of props working and other not.

So I have a google maps component (import GoogleMapReact from 'google-map-react')

static defaultProps = 
 center: lat: 62.10281, lng: -84.14565 ,
 zoom: 11
 ;

 constructor(props) 
 console.log(props); 
 super(props);
 

 render() 

 return (
 <div className='google-map' style= height: '100%', width: '100%' >
 <GoogleMapReact
 bootstrapURLKeys= key: 'somekey' 
 center=this.props.center
 defaultZoom= this.props.zoom >
 <AnyReactComponent
 lat= this.props.lat 
 lng= this.props.lng 
 text= 'Wheres Waldo?' 
 />
 </GoogleMapReact>
 </div>
 )
 

and then from parent component

<MapComponent lat=this.state.latitude lng=this.state.longitude
 center=lat: this.state.latitude, lng: this.state.longitude

I have checked the value to lat, lng and center in constructor and I am getting them as expected still map doesn't work

However, If I hardcode the value in center leaving the lat and lng getting value from state, then it does work.

Now this works, Can someone please explain this concept and the difference and how to overcome it? Your help is appreciated.

<MapComponent lat=this.state.latitude lng=this.state.longitude
 center=lat: 62.10281, lng: -84.14565

reactjs

share|improve this question

edited Mar 24 at 19:25

Raj

asked Mar 24 at 18:11

RajRaj

107210

static defaultProps = 
 center: lat: 62.10281, lng: -84.14565 ,
 zoom: 11
 ;

 constructor(props) 
 console.log(props); 
 super(props);
 

 render() 

 return (
 <div className='google-map' style= height: '100%', width: '100%' >
 <GoogleMapReact
 bootstrapURLKeys= key: 'somekey' 
 center=this.props.center
 defaultZoom= this.props.zoom >
 <AnyReactComponent
 lat= this.props.lat 
 lng= this.props.lng 
 text= 'Wheres Waldo?' 
 />
 </GoogleMapReact>
 </div>
 )
 

<MapComponent lat=this.state.latitude lng=this.state.longitude
 center=lat: this.state.latitude, lng: this.state.longitude

<MapComponent lat=this.state.latitude lng=this.state.longitude
 center=lat: 62.10281, lng: -84.14565

share|improve this question

edited Mar 24 at 19:25

Raj

asked Mar 24 at 18:11

RajRaj

107210

share|improve this question

edited Mar 24 at 19:25

Raj

asked Mar 24 at 18:11

RajRaj

107210

asked Mar 24 at 18:11

RajRaj

107210

asked Mar 24 at 18:11

RajRaj

107210