在 React 函数式组件中传递 Props

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;

Answer 2

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

You missed a couple of things in your Data function component. A return statement and missing arrow on your fat arrow syntax.

Answer 3

Please, try to below code.

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

function ReceiveData(props){
  console.log("Props Output: ", props.data);

  return <div>something</div>
 }

First, Data component return ReceiveData component. And modify arrow function.

Second, Add something return element in ReceiveData component.