My class component which has the data and adding it to the <PointsLayer component:
import React, {Component} from 'react';
export class EventsMap extends Component {
constructor(props) {
super(props);
}
render() {
const data = this.props.data;
console.log("data in events map", data)
....
....
...
<PointsLayer data={data}/>
export default injectIntl(EventsMap);
Trying to receive it inside my PointsLayer component which is a functional component:
import { useState, useEffect } from 'react';
import { loadModules } from 'esri-loader';
import multipoint from "@arcgis/core/geometry/Multipoint";
const PointsLayer = (props) => {
const data = this.props.data;
console.log("data in pointslayer", data);
The console.log in my "EventsMap" component shows the data but the console.log in the "PointsLayer" component is undefined. Is is possible to pass data from a class component to a functional component?
I think you can drop the this in PointsLayer. this is not needed to refer to the prop in a functional component.
console.log("data in pointslayer", props.data);
You should check props directly because you pass data from EventsMap component.
// You can find data in props.
console.log(props);
console.log("data in pointslayer", props.data);