How to pass data from component to another component - reactjs

Question

I'm trying to pass some data (response of fetch to API) from a component to another component, but I don't find the way to pass them.
In the Class AddresForm, I get the serialized data from form, this data is send to API with fecth method. The response has important information and I need use this information contained on response in another component.
class AddressForm extends React.Component{
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
this.validatePredio = this.validatePredio.bind(this);
this.state = {
isApartment: false,
required: false
};
this.cities = [];
this.cities.push(["11001" ,"XXX"]);
this.cities.push(["05001", "YYY"]);
this.cities.push(["76001", "ZZZ"]);
}
handleSubmit(event) {
event.preventDefault();
const data = serialize(event.target, { hash: true });
data['direccion'] = data['direccion']+"+"+data['num1']+"+"+data['num2']+"+"+data['num3'];
fetch('https://api.....', {
method: 'POST',
headers: header,
body: JSON.stringify(data),
})
.then((response) => response.json())
.then((responseData) => {
console.log(responseData); // this data is needed in another component (MapSection)
});
}
And in this Class I need use the response of fetch from the previous component, exactly I need use some coordinates to render a Map.
export class MapSection extends React.Component{
constructor(props) {
super(props);
this.setState = this.setState.bind(this);
}
state = {
address: null
};
get googleMapDiv(){
return document.getElementById("mapa");
}
googleMapRef = createRef();
render(){
console.log(this.props,this.googleMapRef);
return(
<section className="hidden2" id="mapaSection">
<div className="container">
<div className="row mt-5">
<div className="col mt-5">
<h3>Confirma la ubicación de tu inmueble</h3>
<div className="row mt-5">
<div className="col">
<p id="direccionGeo"> {this.state.address !== null ? this.state.address : ""} </p>
</div>
</div>
<div id="mapa"
ref={this.googleMapRef}
style={{ width: 'auto', height: '55vh' }}
className="card-panel white map-holder"
/>
<div className="botonesMapa row mt-5">
<div className="col-6" align="center">
<button type="button" className="btn btn-info corregirBtn">Corregir dirección</button>
</div>
<div className="col-6" align="center">
<button type="button" className="btn btn-info confirmarBtn">Ubicación correcta</button>
</div>
</div>
</div>
</div>
</div>
</section>
)
}
componentDidMount() {
const self = this;
const googleMapScript = document.createElement('script');
googleMapScript.src = 'https://maps.googleapis.com/maps/api/js?key=yourKEY';
window.document.body.appendChild(googleMapScript);
googleMapScript.addEventListener('load',() => {
var coord = { lat: 4.6903289512, lng: -74.0522237222};
this.googleMap = this.createGoogleMap(coord);
this.marker = this.createMarker();
window.google.maps.event.addListener(this.marker, 'dragend', function(e) {
var request = {
"entrada": "address",
"mpio_ccdgo": "11001",
"lat": e.latLng.lat(),
"lng": e.latLng.lng()
};
fetch('https://api....', {
method: 'POST',
headers: header,
body: JSON.stringify(request),
}).then((response) => response.json())
.then(responseData => {
self.setState({
address: responseData.direccion_formato
});
});
});
});
}
createGoogleMap = ( data ) => {
return new window.google.maps.Map(this.googleMapRef.current, {
zoom: 16,
center:{
lat: data.lat, //4.6903289512
lng: data.lng//-74.0522237222
},
disableDefaultUI: true
});
};
createMarker = () => {
return new window.google.maps.Marker({
position: {lat: 4.6903289512, lng: -74.0522237222},
map: this.googleMap,
title: 'Avaluamos',
draggable: true
});
};
}
Finally I've a Class that join all components
class InitialForm extends React.Component{
constructor(props) {
super(props);
}
render(){
return(
<div>
<AddressForm />
<MapSection/>
<FeaturesForm/>
</div>
)
}
}
Many Thanks for your time and knowledge.

Answer 1

An idea would be to add a method to InitialForm that takes a string and saves it to InitialForm's state. You can pass this method as a prop to AddressForm and call it with the api response as an argument. Now you got the response in InitialForm and you can pass it down to MapSection.
Is that clear?