React - passing props for function base react component

0 votes
27 views
added Mar 21 in React by lcjr First Warrant Officer (11,830 points)

Parent component.

Grandchild get data from Parent, but displayed in Child component. 

import React from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const data = {...};  
  const monthlyMortgageAmount = 1500;  

  return (
    <div>
      <ChildComponent
        data={data}
        monthlyMortgageAmount={monthlyMortgageAmount}
      />
    </div>
  );
};

export default ParentComponent;

 

Child component

Child importing GrandChild, that carries data from Parent. Child fetch the data from Parent with Props. Here's an example of how props are called via functional base component.

import React from 'react';
import GrandChildComponent from './GrandChildComponent';

function ChildComponent(props) {
  const { data, monthlyMortgageAmount } = props;

  return (
    <div>
      <GrandChildComponent
        data={data}
        monthlyMortgageAmount={monthlyMortgageAmount}
      />
    </div>
  );
}

export default ChildComponent;

 

lazacode.org - Malaysia's programming knowledge sharing platform, where everyone can share their finding as reference to others.
...