Pass data from functional component to a class component - reactjs

Question

I am new to react and I try to pass two location coordinates from a functional component to a class component. This is the way that I try to pass data to the class component.
function ViewPost() {
console.log(posts);
const long = posts?.location?.longitude;
console.log(long);
const lat=posts?.location?.latitude;
console.log(lat);
const location=[lat,long];
return(
<SimpleMap loc={location}/>
);
}
export default ViewPost;
In the class component,
const AnyReactComponent = ({ text }) => <div>{text}</div>;
class SimpleMap extends Component {
static defaultProps = {
center: {
lat: 59.95,
lng: 30.33
},
zoom: 11
};
render() {
const {lat, long}=this.props.loc;
console.log(lat);
console.log(long);
return (
<div className="location-box-b" style={{ height: '100vh', width: '100%' }}>
<GoogleMapReact
bootstrapURLKeys={{ key: "" }}
defaultCenter={this.props.center}
defaultZoom={this.props.zoom}
>
<AnyReactComponent
lat={this.props.loc.lat}
lng={this.props.loc.long}
text="Seller's Location"
/>
</GoogleMapReact>
</div>
);
}
}
export default SimpleMap;
This is the code that I try to get data from the functional component. When I try to do like this
const {lat, long}=this.props.loc;
console.log(lat);
console.log(long);
print 'undefined' in the console. How do I solve this error?

Answer 1

Your this.props.loc is an array, this is how you defined it here
const location=[lat,long];
but you are trying to get properties from it like from object
const {lat, long}=this.props.loc;
so you have to change it to be an object:
const location={lat,long};