Propsat e Komponentëve në NextJS

Në NextJS, njësoj si në React, të dhënat nga komponentët prind në komponentët fëmijë mund të kalohen përmes propsave.

Le të shohim se si bëhet kjo në praktikë. Le të supozojmë se komponenti ynë fëmijë mund të pranojë propsa:

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

Le t'i shfaqim ato në strukturën e komponentit:

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

Le të supozojmë se komponenti prind përfshin komponentin tonë fëmijë:

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

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

Le t'i kalojmë komponentit fëmijë të dhënat nga prindi:

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,
  },
];