[["$r","MaxWidth","28",{"children":[["$r","Intro",null,{"children":["$r","p",null,{"children":["React inaweza kubadilisha jinsi unavyowazia kuhusu miundo unayotazama na programu unazounda. Unapounda kiolesura cha mtumiaji na React, kwanza utakigawanya kiwe vipande vipande vinavyoitwa ",["$r","em",null,{"children":"vijenzi (components)"}],". Kisha, utaelezea hali tofauti za kuona kwa kila kijenzi chako. Hatimaye, utaunganisha vijenzi vyako pamoja ili data ipite kupitia kwao. Katika funzo hili, tutakuongoza kupitia mchakato wa mawazo wa kuunda jedwali la data ya bidhaa inayoweza kutafutwa kwa kutumia React."]}]}],"\n",["$r","h2",null,{"id":"start-with-the-mockup","children":"Anza na kiigizo "}],"\n",["$r","p",null,{"children":"Wazia kuwa tayari unayo API ya JSON na picha kutoka kwa mbuni."}],"\n",["$r","p",null,{"children":"JSON API inarejesha data fulani ambayo inaonekana kama hii:"}],"\n",["$r","pre",null,{"children":["$r","code",null,{"className":"language-json","children":"[\n { category: \"Fruits\", price: \"$1\", stocked: true, name: \"Apple\" },\n { category: \"Fruits\", price: \"$1\", stocked: true, name: \"Dragonfruit\" },\n { category: \"Fruits\", price: \"$2\", stocked: false, name: \"Passionfruit\" },\n { category: \"Vegetables\", price: \"$2\", stocked: true, name: \"Spinach\" },\n { category: \"Vegetables\", price: \"$4\", stocked: false, name: \"Pumpkin\" },\n { category: \"Vegetables\", price: \"$1\", stocked: true, name: \"Peas\" }\n]\n"}]}],"\n",["$r","p",null,{"children":"Kiigizo (Mockup) kinaonekana hivii:"}],"\n",["$r","img",null,{"src":"/images/docs/s_thinking-in-react_ui.png","width":"300","style":{"margin":"0 auto"}}],"\n",["$r","p",null,{"children":"Ili kutekeleza UI katika React, kwa kawaida utafuata hatua tano sawa."}],"\n",["$r","h2",null,{"id":"step-1-break-the-ui-into-a-component-hierarchy","children":"Hatua ya 1: Vunja UI kuwa daraja la vijenzi "}],"\n",["$r","p",null,{"children":"Anza kwa kuchora visanduku kuzunguka kila kijenzi na kijenzi kidogo kwenye kiigizo na uvipe majina. Ikiwa unafanya kazi na mbuni, wanaweza kuwa tayari wamevipa majina vijenzi hivi kwenye zana yao ya kubuni. Waulize!"}],"\n",["$r","p",null,{"children":"Kulingana na msingi wako, unaweza kufikiria kugawanya muundo katika vijenzi kwa njia tofauti:"}],"\n",["$r","ul",null,{"children":["\n",["$r","li",null,{"children":[["$r","strong",null,{"children":"Programming"}],"—tumia mbinu zile zile za kuamua ikiwa unapaswa kuunda kitendaji kipya au object. Mbinu moja kama hiyo ni ",["$r","a",null,{"href":"https://en.wikipedia.org/wiki/Single_responsibility_principle","target":"_blank","rel":"nofollow noopener noreferrer","children":"kanuni ya uwajibikaji mmoja (single responsibility principle)"}],", yaani, kijenzi kinapaswa kufanya jambo moja tu. Ikiwa kitaishia kukua, inapaswa kigawanywe kiwe vijenzi vidogo."]}],"\n",["$r","li",null,{"children":[["$r","strong",null,{"children":"CSS"}],"—fikiria ni nini ungetengeneza viteule vya darasa. (Hatahivyo, vijenzi ni vidogo kwa kiasi fulani.)"]}],"\n",["$r","li",null,{"children":[["$r","strong",null,{"children":"Design"}],"—fikiria jinsi unavyoweza kupanga safu za muundo."]}],"\n"]}],"\n",["$r","p",null,{"children":"Ikiwa JSON yako imeundwa vizuri, mara nyingi utapata kwamba inaelekeza kwa muundo wa vijenzi vya UI yako. Hiyo ni kwa sababu UI na miundo ya data mara nyingi huwa na usanifu sawa wa habari—yaani, umbo sawa. Tenganisha UI yako katika vijenzi, ambapo kila kijenzi kinalingana na kipande kimoja cha muundo yako wa data."}],"\n",["$r","p",null,{"children":"Kuna vijenzi vitano kwenye skrini hii:"}],"\n"]}],["$r","FullWidth",null,{"children":["$r","CodeDiagram",null,{"flip":true,"children":[["$r","img",null,{"src":"/images/docs/s_thinking-in-react_ui_outline.png","width":"500","style":{"margin":"0 auto"}}],["$r","ol",null,{"children":["\n",["$r","li",null,{"children":[["$r","code",null,{"children":"FilterableProductTable"}]," (kijivu) ina programu nzima."]}],"\n",["$r","li",null,{"children":[["$r","code",null,{"children":"SearchBar"}]," (bluu) inapokea ingizo la mtumiaji."]}],"\n",["$r","li",null,{"children":[["$r","code",null,{"children":"ProductTable"}]," (lavender) huonyesha na kuchuja orodha kulingana na ingizo la mtumiaji."]}],"\n",["$r","li",null,{"children":[["$r","code",null,{"children":"ProductCategoryRow"}]," (kijani) huonyesha kichwa kwa kila aina."]}],"\n",["$r","li",null,{"children":[["$r","code",null,{"children":"ProductRow"}]," (manjano) huonyesha safu mlalo kwa kila bidhaa."]}],"\n"]}]]}]}],["$r","MaxWidth","44",{"children":["\n",["$r","p",null,{"children":["Ukiangalia ",["$r","code",null,{"children":"ProductTable"}]," (lavenda), utaona kwamba kichwa cha jedwali (kilicho na lebo za “Name” na “Price”) si kijenzi chake chenyewe. Hili ni suala la upendeleo, na unaweza kwenda kwa njia yoyote. Kwa mfano huu, ni sehemu ya ",["$r","code",null,{"children":"ProductTable"}]," kwa sababu inaonekana ndani ya orodha ya ",["$r","code",null,{"children":"ProductTable"}],". Hatahivyo, ikiwa kichwa hiki kitakua kikubwa (k.m., ukiongeza kupanga), unaweza kukisogeza hadi kijenzi chake cha ",["$r","code",null,{"children":"ProductTableHeader"}],"."]}],"\n",["$r","p",null,{"children":"Sasa kwa kuwa umetambua vijenzi kwenye kiigizo, vipange katika daraja (hierachy). Vijenzi vinavyoonekana ndani ya kijenzi kingine katika kiigizo vinapaswa kuonekana kama mtoto katika daraja:"}],"\n",["$r","ul",null,{"children":["\n",["$r","li",null,{"children":[["$r","code",null,{"children":"FilterableProductTable"}],"\n",["$r","ul",null,{"children":["\n",["$r","li",null,{"children":["$r","code",null,{"children":"SearchBar"}]}],"\n",["$r","li",null,{"children":[["$r","code",null,{"children":"ProductTable"}],"\n",["$r","ul",null,{"children":["\n",["$r","li",null,{"children":["$r","code",null,{"children":"ProductCategoryRow"}]}],"\n",["$r","li",null,{"children":["$r","code",null,{"children":"ProductRow"}]}],"\n"]}],"\n"]}],"\n"]}],"\n"]}],"\n"]}],"\n",["$r","h2",null,{"id":"step-2-build-a-static-version-in-react","children":"Hatua ya 2: Unda toleo tuli katika React "}],"\n",["$r","p",null,{"children":"Kwa kuwa sasa unalo daraja lako la vijenzi, ni wakati wa kutekeleza programu yako. Mbinu iliyonyooka zaidi ni kuunda toleo ambalo linatoa UI kutoka kwa muundo wako wa data bila kuongeza mwingiliano wowote… bado! Mara nyingi ni rahisi kuunda toleo tuli kwanza na kuongeza mwingiliano baadaye. Kuunda toleo tuli (static version) kunahitaji kuandika sana bila kufikiria, lakini kuongeza mwingiliano kunahitaji kufikiria sana na sio kuandika sana."}],"\n",["$r","p",null,{"children":["Ili kuunda toleo tuli la programu yako linalotoa muundo wa data yako, utataka kuunda ",["$r","a",null,{"href":"/learn/your-first-component","children":"vijenzi"}]," ambavyo vinatumia tena vipengele vingine na kupitisha data kwa kutumia ",["$r","a",null,{"href":"/learn/passing-props-to-a-component","children":"viunga (props)."}]," Viunga ni njia ya kupitisha data kutoka kwa mzazi hadi kwa mtoto. (Ikiwa unafahamu dhana ya ",["$r","a",null,{"href":"/learn/state-a-components-memory","children":"hali (state)"}],", usitumie hali hata kidogo kuunda toleo hili tuli. Hali imetengwa kwa ajili ya mwingiliano pekee, yaani, data ambayo hubadilika baada ya muda. Kwa kuwa hili ni toleo tuli la programu, huhihitaji.)"]}],"\n",["$r","p",null,{"children":["Unaweza kujenga “juu chini” kwa kuanza na kujenga vijenzi juu zaidi katika daraja (kama ",["$r","code",null,{"children":"FilterableProductTable"}],") au “chini juu” kwa kufanya kazi kutoka kwa vijenzi chini chini (kama ",["$r","code",null,{"children":"ProductRow"}],"). Katika mifano rahisi, kwa kawaida ni rahisi kwenda juu-chini, na kwenye miradi mikubwa, ni rahisi kwenda chini-juu."]}],"\n"]}],["$r","Sandpack",null,{"children":[["$r","pre",null,{"children":["$r","code",null,{"className":"language-jsx","meta":"src/App.js","children":"function ProductCategoryRow({ category }) {\n return (\n \n \n {category}\n \n \n );\n}\n\nfunction ProductRow({ product }) {\n const name = product.stocked ? product.name :\n \n {product.name}\n ;\n\n return (\n \n {name}\n {product.price}\n \n );\n}\n\nfunction ProductTable({ products }) {\n const rows = [];\n let lastCategory = null;\n\n products.forEach((product) => {\n if (product.category !== lastCategory) {\n rows.push(\n \n );\n }\n rows.push(\n \n );\n lastCategory = product.category;\n });\n\n return (\n \n \n \n \n \n \n \n {rows}\n

Name	Price

\n );\n}\n\nfunction SearchBar() {\n return (\n \n );\n}\n\nfunction FilterableProductTable({ products }) {\n return (\n

\n \n \n

\n );\n}\n\nconst PRODUCTS = [\n {category: \"Fruits\", price: \"$1\", stocked: true, name: \"Apple\"},\n {category: \"Fruits\", price: \"$1\", stocked: true, name: \"Dragonfruit\"},\n {category: \"Fruits\", price: \"$2\", stocked: false, name: \"Passionfruit\"},\n {category: \"Vegetables\", price: \"$2\", stocked: true, name: \"Spinach\"},\n {category: \"Vegetables\", price: \"$4\", stocked: false, name: \"Pumpkin\"},\n {category: \"Vegetables\", price: \"$1\", stocked: true, name: \"Peas\"}\n];\n\nexport default function App() {\n return ;\n}\n"}]}],["$r","pre",null,{"children":["$r","code",null,{"className":"language-css","children":"body {\n padding: 5px\n}\nlabel {\n display: block;\n margin-top: 5px;\n margin-bottom: 5px;\n}\nth {\n padding-top: 10px;\n}\ntd {\n padding: 2px;\n padding-right: 40px;\n}\n"}]}]]}],["$r","MaxWidth","104",{"children":["\n",["$r","p",null,{"children":["(Ikiwa msimbo huu unaonekana wa kuudhi, pitia ",["$r","a",null,{"href":"/learn/","children":"Anza Haraka"}]," kwanza!)"]}],"\n",["$r","p",null,{"children":["Baada ya kuunda vijenzi vyako, utakuwa na maktaba ya vijenzi vinavyoweza kutumika tena vinavyotoa kielelezo chako cha data. Kwa sababu hii ni programu tuli, vijenzi vitarejesha JSX pekee. Kijenzi kilicho juu ya daraja (",["$r","code",null,{"children":"FilterableProductTable"}],") kitachukua kielelezo chako wa data kama mhimili. Hii inaitwa ",["$r","em",null,{"children":"one-way data flow"}]," kwa sababu data hutiririka kutoka kijenzi cha kiwango cha juu hadi kile kilicho chini ya mti."]}],"\n",["$r","Pitfall",null,{"children":["$r","p",null,{"children":"Kufikia hapa, haupaswi kuwa unatumia thamani za hali zozote. Hiyo ni kwa hatua inayofuata!"}]}],"\n",["$r","h2",null,{"id":"step-3-find-the-minimal-but-complete-representation-of-ui-state","children":"Hatua ya 3: Pata uwakilishi mdogo lakini kamili wa hali ya UI "}],"\n",["$r","p",null,{"children":["Ili kufanya UI iwe na mwingiliano, unahitaji kuwaruhusu watumiaji kubadilisha kielelezo chako cha msingi wa data. Utatumia ",["$r","em",null,{"children":"hali (state)"}]," kwa ajili ya hili."]}],"\n",["$r","p",null,{"children":["Wazia hali kama seti ndogo ya kubadilisha data ambayo programu yako inahitaji kukumbuka. Kanuni muhimu zaidi ya uundaji wa hali ni kuitunza ",["$r","a",null,{"href":"https://en.wikipedia.org/wiki/Don%27t_repeat_yourself","target":"_blank","rel":"nofollow noopener noreferrer","children":"KAUSHA (Usijirudie)."}]," Tambua uwakilishi mdogo kabisa wa hali ambayo programu yako inahitaji na uhesabu kila kitu kingine unapohitaji. Kwa mfano, ikiwa unaunda orodha ya ununuzi, unaweza kuhifadhi bidhaa kama array katika hali. Ikiwa unataka pia kuonyesha idadi ya bidhaa kwenye orodha, usihifadhi idadi ya bidhaa kama thamani nyingine ya hali—badala yake, soma urefu wa array yako."]}],"\n",["$r","p",null,{"children":"Sasa fikiria vipande vyote vya data katika programu hii ya mfano:"}],"\n",["$r","ol",null,{"children":["\n",["$r","li",null,{"children":"Orodha ya asili ya bidhaa"}],"\n",["$r","li",null,{"children":"Maandishi ya utafutaji ambayo mtumiaji ameingiza"}],"\n",["$r","li",null,{"children":"Value ya kisanduku cha kuteua"}],"\n",["$r","li",null,{"children":"Orodha iliyochujwa ya bidhaa"}],"\n"]}],"\n",["$r","p",null,{"children":"Hali zipi kati ya hizi? Tambua zile ambazo sio:"}],"\n",["$r","ul",null,{"children":["\n",["$r","li",null,{"children":["Je, ",["$r","strong",null,{"children":"inabaki ilivyo bila kubadilika"}]," baada ya muda? Ikiwa ni hivyo, hio sio hali."]}],"\n",["$r","li",null,{"children":["Je, ",["$r","strong",null,{"children":"imepitishwa kutoka kwa mzazi"}]," kupitia prop? Ikiwa ni hivyo, hio sio hali."]}],"\n",["$r","li",null,{"children":[["$r","strong",null,{"children":"Je, unaweza kuihesabu"}]," kulingana na hali iliyopo au vifaa katika kijenzi chako? Ikiwa ndivyo, ",["$r","em",null,{"children":"bila shaka"}]," hio nayo sio hali!"]}],"\n"]}],"\n",["$r","p",null,{"children":"Kilichobaki labda ni hali."}],"\n",["$r","p",null,{"children":"Wacha tupitie moja baada ya nyingine tena:"}],"\n",["$r","ol",null,{"children":["\n",["$r","li",null,{"children":["Orodha asili ya bidhaa ",["$r","strong",null,{"children":"imepitishwa kama vifaa, kwa hivyo haijabainishwa."}]]}],"\n",["$r","li",null,{"children":"Maandishi ya utafutaji yanaonekana kuwa ya hali kwani yanabadilika kwa wakati na hayawezi kukokotwa kutoka kwa chochote."}],"\n",["$r","li",null,{"children":"Thamani ya kisanduku cha kuteua inaonekana kuwa hali kwani inabadilika kwa wakati na haiwezi kukokotwa kutoka kwa chochote."}],"\n",["$r","li",null,{"children":["Orodha iliyochujwa ya bidhaa ",["$r","strong",null,{"children":"haijabainishwa kwa sababu inaweza kukokotwa"}]," kwa kuchukua orodha asili ya bidhaa na kuichuja kulingana na maandishi ya utafutaji na thamani ya kisanduku cha kuteua."]}],"\n"]}],"\n",["$r","p",null,{"children":"Hii ina maana kwamba ni maandishi ya utafutaji pekee na thamani ya kisanduku cha kuteua ndizo zilizotajwa! Imefanywa vizuri!"}],"\n",["$r","DeepDive",null,{"children":[["$r","h4",null,{"id":"props-vs-state","children":"Viunga dhidi ya Hali "}],["$r","p",null,{"children":"Kuna aina mbili za data ya “kielelezo” katika React: viunga na hali. Hizi mbili ni tofauti sana:"}],["$r","ul",null,{"children":["\n",["$r","li",null,{"children":[["$r","a",null,{"href":"/learn/passing-props-to-a-component","children":[["$r","strong",null,{"children":"Viunga"}]," ni kama hoja unazopitisha"]}]," kwa kitendaji. Huruhusu kijenzi mzazi kupitisha data kwa kijenzi mtoto na kubinafsisha mwonekano wake. Kwa mfano, ",["$r","code",null,{"children":"Fomu"}]," inaweza kupitisha kiunga cha ",["$r","code",null,{"children":"color"}]," kwa ",["$r","code",null,{"children":"Button"}],"."]}],"\n",["$r","li",null,{"children":[["$r","a",null,{"href":"/learn/state-a-components-memory","children":[["$r","strong",null,{"children":"Hali"}]," ni kama kumbukumbu ya kijenzi."]}]," Huruhusu kijenzi kufuatilia baadhi ya taarifa na kuibadilisha kulingana na mwingiliano. Kwa mfano, ",["$r","code",null,{"children":"Button"}]," kinaweza kufuatilia hali ya ",["$r","code",null,{"children":"isHovered"}],"."]}],"\n"]}],["$r","p",null,{"children":["Viunga na hali ni tofauti, lakini vinafanya kazi pamoja. Kijenzi mzazi mara nyingi kitaweka baadhi ya taarifa katika hali (ili kiweze kukibadilisha), na ",["$r","em",null,{"children":"kuipitisha"}]," kwa vijenzi watoto kama viunga vyake. Ni sawa ikiwa tofauti bado inahisi kuwa ngumu katika usomaji wa kwanza. Inachukua mazoezi kidogo ili iweze kushikamana kabisa!"]}]]}],"\n",["$r","h2",null,{"id":"step-4-identify-where-your-state-should-live","children":"Hatua ya 4: Tambua pale hali yako itadumu "}],"\n",["$r","p",null,{"children":["Baada ya kutambua data ya hali ya chini zaidi ya programu yako, unahitaji kutambua ni kijenzi kipi kinawajibika kubadilisha hali hii, au ",["$r","em",null,{"children":"kinamiliki"}]," hali. Kumbuka: React hutumia mtiririko wa data wa njia moja, kupitisha data chini ya daraja ya vijenzi kutoka kijenzi mzazi hadi cha mtoto. Huenda isieleweke mara moja ni kijenzi gani kinapaswa kumiliki hali gani. Hili linaweza kuwa gumu ikiwa wewe ni mgeni kwa dhana hii, lakini unaweza kuibaini kwa kufuata hatua hizi!"]}],"\n",["$r","p",null,{"children":"Kwa kila sehemu ya hali katika programu yako:"}],"\n",["$r","ol",null,{"children":["\n",["$r","li",null,{"children":["Tambua ",["$r","em",null,{"children":"kila"}]," kijenzi kinachofanya kitu kulingana na hali hiyo."]}],"\n",["$r","li",null,{"children":"Tafuta kijenzi chao cha karibu zaidi cha mzazi—kijenzi kilicho juu yao yote katika daraja."}],"\n",["$r","li",null,{"children":["Amua mahali ambapo hali inapaswa kudumu:","\n",["$r","ol",null,{"children":["\n",["$r","li",null,{"children":"Mara nyingi, unaweza kuweka hali moja kwa moja kwenye mzazi wao wa kawaida."}],"\n",["$r","li",null,{"children":"Unaweza pia kuweka hali katika kijenzi fulani juu ya mzazi wao wa kawaida."}],"\n",["$r","li",null,{"children":"Iwapo huwezi kupata kipengele ambapo inaeleweka kumiliki jimbo, unda kijenzi kipya kwa ajili ya kushikilia hali pekee na uiongeze mahali fulani katika daraja juu ya kijenzi mzazi cha kawaida."}],"\n"]}],"\n"]}],"\n"]}],"\n",["$r","p",null,{"children":"In the previous step, you found two pieces of state in this application: the search input text, and the thamani of the checkbox. In this example, they always appear together, so it makes sense to put them into the same place."}],"\n",["$r","p",null,{"children":"Katika hatua ya awali, ulipata vipande viwili vya hali katika programu hii: maandishi ya ingizo ya utafutaji, na thamani ya kisanduku cha kuteua. Katika mfano huu, daima huonekana pamoja, kwa hiyo ni mantiki kuviweka katika sehemu moja."}],"\n",["$r","p",null,{"children":"Sasa wacha tupitie mkakati wetu kwao:"}],"\n",["$r","ol",null,{"children":["\n",["$r","li",null,{"children":[["$r","strong",null,{"children":"Tambua vijenzi vinavyotumia hali:"}],"\n",["$r","ul",null,{"children":["\n",["$r","li",null,{"children":[["$r","code",null,{"children":"ProductTable"}]," inahitaji kuchuja orodha ya bidhaa kulingana na hali hiyo (maandishi ya utafutaji na thamani ya kisanduku cha kuteua)."]}],"\n",["$r","li",null,{"children":[["$r","code",null,{"children":"SearchBar"}]," inahitaji kuonyesha hali hiyo (maandishi ya utafutaji na thamani ya kisanduku cha kuteua)."]}],"\n"]}],"\n"]}],"\n",["$r","li",null,{"children":[["$r","strong",null,{"children":"Tafuta mzazi wao wa kawaida:"}]," Kijenzi mzazi cha kwanza ambacho vijenzi vyote viwili hushiriki ni ",["$r","code",null,{"children":"FilterableProductTable"}],"."]}],"\n",["$r","li",null,{"children":[["$r","strong",null,{"children":"Amua mahali pa kuishi"}],": Tutaweka maandishi ya kichujio na thamani za hali zilizochaguliwa katika ",["$r","code",null,{"children":"FilterableProductTable"}],"."]}],"\n"]}],"\n",["$r","p",null,{"children":["Kwa hivyo state thamani zitaishi katika ",["$r","code",null,{"children":"FilterableProductTable"}],"."]}],"\n",["$r","p",null,{"children":["Ongeza hali kwa kijenzi chenye ",["$r","a",null,{"href":"/reference/react/useState","children":["Kiunganishi (Hook) cha ",["$r","code",null,{"children":"useState()"}],"."]}]," Hooks ni vitendaji maalum ambavyo hukuruhusu “kuunganisha” React. Ongeza vigezo viwili vya hali juu ya ",["$r","code",null,{"children":"FilterableProductTable"}]," na ubainishe hali yao ya awali:"]}],"\n",["$r","pre",null,{"children":["$r","code",null,{"className":"language-js","children":"function FilterableProductTable({ products }) {\n const [filterText, setFilterText] = useState('');\n const [inStockOnly, setInStockOnly] = useState(false); \n"}]}],"\n",["$r","p",null,{"children":["Kisha, pitisha ",["$r","code",null,{"children":"filterText"}]," na ",["$r","code",null,{"children":"inStockOnly"}]," kwa ",["$r","code",null,{"children":"ProductTable"}]," na ",["$r","code",null,{"children":"SearchBar"}]," kama kiunga:"]}],"\n",["$r","pre",null,{"children":["$r","code",null,{"className":"language-js","children":"

\n \n \n

\n"}]}],"\n",["$r","p",null,{"children":["Unaweza kuanza kuona jinsi programu yako itakavyofanya kazi. Hariri vakue ya awali ya ",["$r","code",null,{"children":"filterText"}]," kutoka ",["$r","code",null,{"children":"useState('')"}]," hadi ",["$r","code",null,{"children":"useState('fruit')"}]," katika msimbo wa kisanduku hapa chini. Utaona maandishi ya utafutaji na sasisho la jedwali:"]}],"\n"]}],["$r","Sandpack",null,{"children":[["$r","pre",null,{"children":["$r","code",null,{"className":"language-jsx","meta":"src/App.js","children":"import { useState } from 'react';\n\nfunction FilterableProductTable({ products }) {\n const [filterText, setFilterText] = useState('');\n const [inStockOnly, setInStockOnly] = useState(false);\n\n return (\n

\n \n \n

\n );\n}\n\nfunction ProductCategoryRow({ category }) {\n return (\n \n \n {category}\n \n \n );\n}\n\nfunction ProductRow({ product }) {\n const name = product.stocked ? product.name :\n \n {product.name}\n ;\n\n return (\n \n {name}\n {product.price}\n \n );\n}\n\nfunction ProductTable({ products, filterText, inStockOnly }) {\n const rows = [];\n let lastCategory = null;\n\n products.forEach((product) => {\n if (\n product.name.toLowerCase().indexOf(\n filterText.toLowerCase()\n ) === -1\n ) {\n return;\n }\n if (inStockOnly && !product.stocked) {\n return;\n }\n if (product.category !== lastCategory) {\n rows.push(\n \n );\n }\n rows.push(\n \n );\n lastCategory = product.category;\n });\n\n return (\n \n \n \n \n \n \n \n {rows}\n

Name	Price

\n );\n}\n\nfunction SearchBar({ filterText, inStockOnly }) {\n return (\n \n );\n}\n\nconst PRODUCTS = [\n {category: \"Fruits\", price: \"$1\", stocked: true, name: \"Apple\"},\n {category: \"Fruits\", price: \"$1\", stocked: true, name: \"Dragonfruit\"},\n {category: \"Fruits\", price: \"$2\", stocked: false, name: \"Passionfruit\"},\n {category: \"Vegetables\", price: \"$2\", stocked: true, name: \"Spinach\"},\n {category: \"Vegetables\", price: \"$4\", stocked: false, name: \"Pumpkin\"},\n {category: \"Vegetables\", price: \"$1\", stocked: true, name: \"Peas\"}\n];\n\nexport default function App() {\n return ;\n}\n"}]}],["$r","pre",null,{"children":["$r","code",null,{"className":"language-css","children":"body {\n padding: 5px\n}\nlabel {\n display: block;\n margin-top: 5px;\n margin-bottom: 5px;\n}\nth {\n padding-top: 5px;\n}\ntd {\n padding: 2px;\n}\n"}]}]]}],["$r","MaxWidth","134",{"children":["\n",["$r","p",null,{"children":"Kumbuka kwamba kuhariri fomu bado haifanyi kazi. Kuna hitilafu ya kiweko kwenye sanduku la mchanga hapo juu kuelezea kwa nini:"}],"\n",["$r","ConsoleBlock",null,{"level":"error","children":["$r","p",null,{"children":"Umepeana kiunga cha `value` cha uga wa fomu bila kidhibiti cha `onChange`. Hii itatoa uga wa kusoma pekee."}]}],"\n",["$r","p",null,{"children":["Katika kisanduku cha mchanga hapo juu, viunga ",["$r","code",null,{"children":"ProductTable"}]," na ",["$r","code",null,{"children":"SearchBar"}]," soma ",["$r","code",null,{"children":"filterText"}]," na ",["$r","code",null,{"children":"inStockOnly"}]," ili kutoa jedwali, ingizo, na kisanduku cha kuteua. Kwa mfano, hivi ndivyo ",["$r","code",null,{"children":"SearchBar"}]," inavyojaza thamani ya ingizo:"]}],"\n",["$r","pre",null,{"children":["$r","code",null,{"className":"language-js","meta":"{1,6}","children":"function SearchBar({ filterText, inStockOnly }) {\n return (\n

\n \n"}]}],"\n",["$r","p",null,{"children":"Hata hivyo, bado hujaongeza msimbo wowote ili kujibu vitendo vya mtumiaji kama vile kuandika. Hii itakuwa hatua yako ya mwisho."}],"\n",["$r","h2",null,{"id":"step-5-add-inverse-data-flow","children":"Hatua ya 5: Ongeza mtiririko wa data kinyume "}],"\n",["$r","p",null,{"children":["You want to make it so whenever the user changes the form inputs, the state updates to reflect those changes. The state is owned by ",["$r","code",null,{"children":"FilterableProductTable"}],", so only it can call ",["$r","code",null,{"children":"setFilterText"}]," and ",["$r","code",null,{"children":"setInStockOnly"}],". To let ",["$r","code",null,{"children":"SearchBar"}]," update the ",["$r","code",null,{"children":"FilterableProductTable"}],"’s state, you need to pass these functions down to ",["$r","code",null,{"children":"SearchBar"}],":"]}],"\n",["$r","p",null,{"children":["Kwa sasa programu yako inatekelezwa kwa njia ipasavyo ikiwa na viunga na hali inayotiririka chini ya daraja. Lakini ili kubadilisha hali kulingana na ingizo la mtumiaji, utahitaji kuauni data inayotiririka kwa njia nyingine: vijenzi vya fomu vilivyo ndani kabisa ya daraja vinahitaji kusasisha hali katika ",["$r","code",null,{"children":"FilterableProductTable"}],"."]}],"\n",["$r","p",null,{"children":["React hufanya mtiririko huu wa data kuwa wazi, lakini unahitaji kuandika zaidi kuliko kuunganisha data kwa njia mbili. Ukijaribu kuandika au kuteua kisanduku katika mfano ulio hapo juu, utaona kuwa React inapuuza ingizo lako. Hii ni makusudi. Kwa kuandika ",["$r","code",null,{"children":""}],", umeweka ",["$r","code",null,{"children":"value"}]," mhimili wa ",["$r","code",null,{"children":"input"}]," kuwa sawa na ",["$r","code",null,{"children":"filterText"}]," hali iliyopitishwa kutoka ",["$r","code",null,{"children":"FilterableProductTable"}],". Kwa kuwa hali ya ",["$r","code",null,{"children":"filterText"}]," haijawekwa kamwe, ingizo halibadiliki."]}],"\n",["$r","p",null,{"children":["Unataka kuifanya iwe hivyo wakati wowote mtumiaji anapobadilisha ingizo za fomu, hali husasisha ili kuonyesha mabadiliko hayo. Hali hiyo inamilikiwa na ",["$r","code",null,{"children":"FilterableProductTable"}],", kwa hivyo inaweza tu kuita ",["$r","code",null,{"children":"setFilterText"}]," na ",["$r","code",null,{"children":"setInStockOnly"}],". Ili kuruhusu ",["$r","code",null,{"children":"SearchBar"}]," kusasisha hali ya ",["$r","code",null,{"children":"FilterableProductTable"}],", unahitaji kupitisha vitendaji hivi hadi kwa ",["$r","code",null,{"children":"SearchBar"}],":"]}],"\n",["$r","pre",null,{"children":["$r","code",null,{"className":"language-js","meta":"{2,3,10,11}","children":"function FilterableProductTable({ products }) {\n const [filterText, setFilterText] = useState('');\n const [inStockOnly, setInStockOnly] = useState(false);\n\n return (\n

\n \n"}]}],"\n",["$r","p",null,{"children":["Ndani ya ",["$r","code",null,{"children":"SearchBar"}],", utaongeza vidhibiti vya tukio vya ",["$r","code",null,{"children":"onChange"}]," na kuweka hali mzazi kutoka kwao:"]}],"\n",["$r","pre",null,{"children":["$r","code",null,{"className":"language-js","meta":"{4,5,13,19}","children":"function SearchBar({\n filterText,\n inStockOnly,\n onFilterTextChange,\n onInStockOnlyChange\n}) {\n return (\n \n onFilterTextChange(e.target.value)}\n />\n \n onInStockOnlyChange(e.target.checked)}\n"}]}],"\n",["$r","p",null,{"children":"Sasa programu inafanya kazi kikamilifu!"}],"\n"]}],["$r","Sandpack",null,{"children":[["$r","pre",null,{"children":["$r","code",null,{"className":"language-jsx","meta":"src/App.js","children":"import { useState } from 'react';\n\nfunction FilterableProductTable({ products }) {\n const [filterText, setFilterText] = useState('');\n const [inStockOnly, setInStockOnly] = useState(false);\n\n return (\n

\n \n \n

Name	Price

\n );\n}\n\nfunction SearchBar({\n filterText,\n inStockOnly,\n onFilterTextChange,\n onInStockOnlyChange\n}) {\n return (\n \n onFilterTextChange(e.target.value)} />\n \n onInStockOnlyChange(e.target.checked)} />\n {' '}\n Only show products in stock\n \n \n );\n}\n\nconst PRODUCTS = [\n {category: \"Fruits\", price: \"$1\", stocked: true, name: \"Apple\"},\n {category: \"Fruits\", price: \"$1\", stocked: true, name: \"Dragonfruit\"},\n {category: \"Fruits\", price: \"$2\", stocked: false, name: \"Passionfruit\"},\n {category: \"Vegetables\", price: \"$2\", stocked: true, name: \"Spinach\"},\n {category: \"Vegetables\", price: \"$4\", stocked: false, name: \"Pumpkin\"},\n {category: \"Vegetables\", price: \"$1\", stocked: true, name: \"Peas\"}\n];\n\nexport default function App() {\n return ;\n}\n"}]}],["$r","pre",null,{"children":["$r","code",null,{"className":"language-css","children":"body {\n padding: 5px\n}\nlabel {\n display: block;\n margin-top: 5px;\n margin-bottom: 5px;\n}\nth {\n padding: 4px;\n}\ntd {\n padding: 2px;\n}\n"}]}]]}],["$r","MaxWidth","last",{"children":["\n",["$r","p",null,{"children":["Unaweza kujifunza yote kuhusu kushughulikia matukio na hali ya kusasisha katika sehemu ya ",["$r","a",null,{"href":"/learn/adding-interactivity","children":"Kuongeza Mwingiliano"}],"."]}],"\n",["$r","h2",null,{"id":"where-to-go-from-here","children":"Uende wapi kutoka hapa "}],"\n",["$r","p",null,{"children":["Huu ulikuwa utangulizi mfupi sana wa jinsi ya kuwaza juu ya kuunda vijenzi na programu ukitumia React. Unaweza ",["$r","a",null,{"href":"/learn/installation","children":"kuanzisha mradi wa React"}]," sasa hivi au ",["$r","a",null,{"href":"/learn/describing-the-ui","children":"kupiga mbizi zaidi kwenye sintaksia yote"}]," iliyotumika katika funzo hili."]}]]}]]