Props za Sehemu za NextJS

Katika NextJS, sawa na React, data kutoka kwa sehemu za mzazi hadi kwa sehemu za mtoto zinaweza kupitishwa kupitia props.

Wacha tuone jinsi hii inafanyika kwa vitendo. Hebu tuseme sehemu yetu ya mtoto inaweza kukubali props:

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

Wacha tuzionyeshe katika muundo wa HTML wa sehemu hiyo:

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

Hebu tuseme sehemu ya mzazi inajumuisha sehemu yetu ya mtoto:

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

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

Wacha tuwasilishe kwenye sehemu ya mtoto data kutoka kwa mzazi:

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

export default function Test() {
  return <>
    <h1>Mtihani</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,
  },
];