NextJS में कंपोनेंट प्रॉप्स

NextJS में भी, React की तरह, डेटा पैरेंट कंपोनेंट से चाइल्ड कंपोनेंट में प्रॉप्स के माध्यम से पास किया जा सकता है।

आइए व्यवहार में देखें कि यह कैसे किया जाता है। मान लीजिए कि हमारा चाइल्ड कंपोनेंट प्रॉप्स स्वीकार कर सकता है:

src/comp/child/child.jsxexport default function Child({text1, text2}) {
  return <p>
    child
  </p>;
}

आइए उन्हें कंपोनेंट के लेआउट में प्रदर्शित करें:

src/comp/child/child.jsxexport default function Child({text1, text2}) {
  return <p>
    child
    {text1}
    {text2}
  </p>;
}

मान लीजिए कि पैरेंट कंपोनेंट में हमारा चाइल्ड कंपोनेंट शामिल है:

src/app/test/page.jsximport Child from '@/comp/child/child.jsx';

export default function Test() {
  return <>
    <h1>Test</h1>
    <Child />
  </>;
}

आइए चाइल्ड कंपोनेंट में पैरेंट से डेटा पास करें:

src/app/test/page.jsximport Child from '@/comp/child/child.jsx';

export default function Test() {
  return <>
    <h1>Test</h1>
    <Child text1="aaa" text2="bbb" />
  </>;
}

prods.jslet prods = [
  {
    id: 1,
    name: 'prod1',
    cost: 100,
  },
  {
    id: 2,
    name: 'prod2',
    cost: 200,
  },
  {
    id: 3,
    name: 'prod3',
    cost: 300,
  },
];