React js 将道具传递给组件

Question

Hello basically I need to pass some data to a component to be able to popular that component:

const Data = {
  name: "a",
  title: "b"
};
export default function App() {
  return (
    <Div className="App">
      <Card name={Data.name} title={Data.title} />
    </Div>
  );
}

my card componen The component I need to receive data:

const Card = ({ props }) => {
  return (
    <div>
      <h1>{props.name}</h1>
      <p>{props.title}</p>
    </div>
  );
};

export default Card;

For some reason I am not getting these props on my card component

could someone help me with a solution to move props from a functional component to a functional component

example:

https://codesandbox.io/s/friendly-swanson-syuln

Answer 1

Your component declaration is wrong. You should only use brackets to destructure props, not for the entire props object.

const Card = (props) => {

Answer 2

just get rid of the curly braces around props in cards.js

import React from "react";

const Card = ( props ) => {
  return (
    <div>
      <h1>{props.name}</h1>
      <p>{props.title}</p>
    </div>
  );
};

export default Card;