Passing data from a class component to a functional component

Question

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?

Answer 1

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);

Answer 2

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);