how to pass the data from one Component to another component - reactjs

Question

I have created two components. one is for the map and other one is for some inputs. I have two inputs to get the latitude and longitude. I am passing the longitude and latitude which i got from the user, to my other component using longitude= {this.state.longitude} latitude = {this.state.latitude}. If user haven't input the longitude and latitude or user clear the input it should show these coordinates lat: 22.5726, lng: 88.3639. how can i do it ? so far this is what i have done. when i pass the coordinates it doesn't show the place.what have i done wrong? And also i want to know how i can show the default coordinates when user clear the input? when i console.log this.props.latitude i get following error TypeError: Cannot read property 'latitude' of undefined. I think My data is not passing Properly to my map Component !if anyone knows how to fix this please tell!
this is my file structure.
MainFolder
|
|__ navigation.js
|
|__ right folder
| |
| |__form.js(this is where i have two inputs)
| |
| |__ MapContainerFolder
| |
| |__MapContainer.js
|
|
|__ left folder
|
|__left.js
In my Form component i have below code
<MapContainer
longitude= {this.state.longitude}
latitude = {this.state.latitude}
/>
in my navigation.js i have this
<form/>
<left/>
this is my mapContainer.js
import React, { Component } from "react";
import {Map, InfoWindow, Marker, GoogleApiWrapper} from 'google-maps-react';
export class MapContainer extends Component {
render() {
const style = {
width: '24%',
height: '65%'
}
return (
<Map
style={style}
google={this.props.google}
zoom={14}
initialCenter={{
lat: 22.5726,
lng: 88.3639
}}
center={{
lat:this.props.longitude,
lng:this.props.latitude
}}
>
<Marker onClick={this.onMarkerClick}
name={'Current location'} />
<InfoWindow onClose={this.onInfoWindowClose}>
<div>
</div>
</InfoWindow>
</Map>
);
}
}
export default GoogleApiWrapper({
apiKey: ("my api key")
})(MapContainer)

Answer 1

In your MapcContainer class, you need to define your initail state based on the props you pass to this component from outside and set a default for them. Since I don't have a Google API key, I'm going to demonstrate your example in Leaflet, but I'm sure you'll get the idea.
const { Map: LeafletMap, TileLayer, Marker, Popup } = window.ReactLeaflet
class App extends React.Component {
constructor(props) {
super(props);
const lat = this.props.latitude || 51.505;
const lng = this.props.longitude || -0.091;
this.state = {
center: [lat,lng],
zoom: 13
};
}
render() {
return (
<div>
<LeafletMap center={this.state.center} zoom={this.state.zoom}>
<TileLayer
attribution='&copy OpenStreetMap contributors'
url="https://{s}.tile.osm.org/{z}/{x}/{y}.png"
/>
<Marker position={this.state.center}>
<Popup>Hello World!
</Popup>
</Marker>
</Map>
</div>
);
}
}
const rootElement = document.getElementById("root");
const Wrapper = () => <App latitude={51.505} longitude={-0.091} />;
ReactDOM.render(<Wrapper />, rootElement);