Passing Props in React Functional Component

Question

I am trying to understand how props work. At the moment I have an array which I want to send to another component. But the input components shows the props value as

"Undefined"

. Below is my code:

import React from 'react;
import ReceiveData from "./ReceiveData";

const Data =() = {
const sendData = ["1A", "2A", "3A", "4A", "1B", "2B", "3B", "1C", "2C", "3C", "4C", "1D", "2D", "3D", "4D", "4B"];
<ReceiveData data ={sendData} />
}
export default Data;

Code for ReceiveData component is as follows:

import React from 'react;
    function ReceiveData(props){
     console.log("Props Output: ", props.data);
    }
    export default ReceiveData;

Where am I going wrong? Sorry of my question is very trivial. Thanks in advance,

Answer 1

There are few syntax issues like single quote missing on both files, and => arrow was missing in Data() function and also return statment missing

I write updated code

import React from 'react';
import ReceiveData from "./ReceiveData";

const Data = () => {
const sendData = ["1A", "2A", "3A", "4A", "1B", "2B", "3B", "1C", "2C", "3C", "4C", "1D", "2D", "3D", "4D", "4B"];
   return <ReceiveData data ={sendData} />
}
export default Data;

For the second file

import React from 'react';
    function ReceiveData(props){
         console.log("Props Output: ", props.data);

         return <div>html code here</div>
    }
export default ReceiveData;