Merge pull request #55 from reactjs/sync-4f9e9a56

Sync with react.dev @ 4f9e9a5

src/content/learn/conditional-rendering.md

@@ -626,11 +626,7 @@ export default function PackingList() {
 
 ສັງເກດທ່ານຕ້ອງຂຽນ `importance > 0 && ...` ແທນທີ່ຈະເປັນ `importance && ...` ສະນັ້ນຫາກ `importance` ເປັນ `0`, ຜົນລັບຈະບໍ່ສະແດງ `0`!
 
-<<<<<<< HEAD
 ໃນວິທີການນີ້, ຈະໃຊ້ເງື່ອນໄຂສອງເງື່ອນໄຂແຍກກັນເພື່ອໃສ່ຊ່ອງວ່າງລະຫວ່າງຊື່ ແລະ label. ອີກວິທີໜຶ່ງ, ທ່ານສາມາດໃຊ້ fragment ທີ່ມີຊ່ອງວ່າງນຳໜ້າ: `importance > 0 && <> <i>...</i></>` ຫຼື ເພີ່ມຊ່ອງວ່າງພາຍໃນ `importance > 0 && <> <i>...</i></>`.
-=======
-In this solution, two separate conditions are used to insert a space between the name and the importance label. Alternatively, you could use a Fragment with a leading space: `importance > 0 && <> <i>...</i></>` or add a space immediately inside the `<i>`:  `importance > 0 && <i> ...</i>`.
->>>>>>> 3563d95efe8719bdae8bbd258e6ab4134753348b
 
 </Solution>
 

src/content/learn/rendering-lists.md

@@ -1086,11 +1086,8 @@ export const recipes = [{
 
 #### ລາຍການທີ່ມີໂຕຂັ້ນ {/*list-with-a-separator*/}
 
-<<<<<<< HEAD
 ຕົວຢ່າງນີ້ສະແດງ haiku ທີ່ມີຊື່ສຽງໂດຍ Katsushika Hokusai, ໂດຍແຕ່ລະແຖວຈະຢູ່ໃນແທັກ `<p>`. ວຽກຂອງທ່ານແມ່ນຕ້ອງເພີ່ມໂຕຂັ້ນ `<hr />` ລະຫວ່າງແຕ່ລະຫຍໍ້ໜ້າ. ໂຄ່ງສ້າງຜົນລັບຂອງທ່ານຄວນມີລັກສະນະນີ້:
-=======
-This example renders a famous haiku by Tachibana Hokushi, with each line wrapped in a `<p>` tag. Your job is to insert an `<hr />` separator between each paragraph. Your resulting structure should look like this:
->>>>>>> 68f417a600c7d7b8c4131e39f8a843a856ae3909
+
 
 ```js
 <article>
@@ -1149,11 +1146,8 @@ hr {
 
 <Hint>
 
-<<<<<<< HEAD
 ທ່ານຈະຕ້ອງແປງ `map` ເປັນ loop ດ້ວຍໂຕເອງ, ຫຼື ໃຊ້ fragment.
-=======
-You'll either need to convert `map` to a manual loop, or use a Fragment.
->>>>>>> 3563d95efe8719bdae8bbd258e6ab4134753348b
+
 
 </Hint>
 
@@ -1216,11 +1210,7 @@ hr {
 
 ການໃຊ້ index ແຖວເກົ່າເປັນ `key` ບໍ່ເຮັດວຽກອີກຕໍ່ໄປເພາະວ່າແຕ່ລະໂຕຂັ້ນ ແລະ ຫຍໍ້ໜ້າແຕ່ລະໂຕຢູ່ໃນ array ດຽວກັນ. ເຖິງຢ່າງໃດກໍຕາມ, ທ່ານສາມາດກຳນົດ key ທີ່ແຕກຕ່າງກັນໃຫ້ແຕ່ລະລາຍການໄດ້ໂດຍໃຊ້ຄຳຕໍ່ທ້າຍເຊັ່ນ `key={i + '-text'}`.
 
-<<<<<<< HEAD
 ອີກວິທີໜຶ່ງ, ທ່ານສາມາດສະແດງຜົນ collection ຂອງ fragment ທີ່ປະກອບມີ `<hr />` and `<p>...</p>`. ເຖິງຢ່າງໃດກໍຕາມ, syntax `<>...</>` ບໍ່ຮອງຮັບການສົ່ງຜ່ານ key, ດັ່ງນັ້ນທ່ານຕ້ອງໄດ້ຂຽນ `<Fragment>` ຢ່າງຊັດເຈນ:
-=======
-Alternatively, you could render a collection of Fragments which contain `<hr />` and `<p>...</p>`. However, the `<>...</>` shorthand syntax doesn't support passing keys, so you'd have to write `<Fragment>` explicitly:
->>>>>>> 3563d95efe8719bdae8bbd258e6ab4134753348b
 
 <Sandpack>
 
@@ -1266,11 +1256,8 @@ hr {
 
 </Sandpack>
 
-<<<<<<< HEAD
 ຈື່ໄວ້ວ່າ, fragment (ມັກຂຽນເປັນ `<> </>`) ໃຫ້ທ່ານ group JSX node ໂດຍບໍ່ຕ້ອງເພີ່ມ `<div>`!
-=======
-Remember, Fragments (often written as `<> </>`) let you group JSX nodes without adding extra `<div>`s!
->>>>>>> 3563d95efe8719bdae8bbd258e6ab4134753348b
+
 
 </Solution>
 

src/content/learn/tutorial-tic-tac-toe.md

@@ -337,11 +337,8 @@ import './styles.css';
 import App from './App';
 ```
 
-<<<<<<< HEAD
 ແຖວທີ 1-5 ແມ່ນລວມສ່ວນທີ່ຈຳເປັນມາລວມກັນ:
-=======
-Lines 1-5 bring all the necessary pieces together: 
->>>>>>> 3563d95efe8719bdae8bbd258e6ab4134753348b
+
 
 * React
 * Library React ເພື່ອສື່ສານກັບເວັບບາວເຊີ (React DOM)
@@ -370,11 +367,7 @@ export default function Square() {
 
 </ConsoleBlock>
 
-<<<<<<< HEAD
 Component React ຕ້ອງການ return ໜຶ່ງ JSX element ແລະ ບໍ່ສາມາດສົ່ງ JSX ທີ່ຕິດພັນຫຼາຍອັນເຊັ່ນ ສອງປຸ່ມກົດ. ເພື່ອແກ້ໄຂບັນຫານີ້ທ່ານສາມາດໃຊ້ *fragments* (`<>` ແລະ `</>`) ເພື່ອລວມ JSX ທີ່ຕິດພັນຫຼາຍອັນດັ່ງນີ້:
-=======
-React components need to return a single JSX element and not multiple adjacent JSX elements like two buttons. To fix this you can use *Fragments* (`<>` and `</>`) to wrap multiple adjacent JSX elements like this:
->>>>>>> 3563d95efe8719bdae8bbd258e6ab4134753348b
 
 ```js {3-6}
 export default function Square() {
@@ -1182,11 +1175,8 @@ Too many re-renders. React limits the number of renders to prevent an infinite l
 
 ເມື່ອທ່ານຜ່ານ `onSquareClick={handleClick}`, ທ່ານກຳລັງສົ່ງຟັງຊັ່ນ `handleClick` ລົງເປັນ prop. ທ່ານບໍ່ໄດ້ເອີ້ນໃຊ້ມັນ! ແຕ່ຕອນນີ້ທ່ານກຳລັງ *ເອີ້ນໃຊ້* ຟັງຊັ່ນນັ້ນທັນທີ--ສັງເກດວົງເລັບໃນ `handleClick(0)` --ແລະ ນັ້ນແມ່ນສາເຫດທີ່ມັນເຮັດວຽກໄວເກີນໄປ. ທ່ານບໍ່ *ຕ້ອງການ* ເອີ້ນ `handleClick` ຈົນກວ່າຜູ້ໃຊ້ຈະຄິກ!
 
-<<<<<<< HEAD
 ທ່ານສາມາດແກ້ໄຂໂດຍການສ້າງຟັງຊັ່ນເຊັ່ນ `handleFirstSquareClick` ທີ່ເອີ້ນ `handleClick(0)`, ຟັງຊັ່ນເຊັ່ນ `handleSeconSquareClick` ທີ່ເອີ້ນ `handleClick(1)` ແລະ ອື່ນໆ. ທ່ານຈະສົ່ງຜ່ານ (ແທນທີ່ຈະເອີ້ນໃຊ້) ຟັງຊັ່ນເຫຼົ່ານີ້ລົງມາເປັນ prop ເຊັ່ນ `onSquareClick={handleFirstSquareClick}`. ນີ້ຈະແກ້ໄຂບັນຫາການ loop ທີ່ບໍ່ສິ້ນສຸດ.
-=======
-You could fix this by creating a function like `handleFirstSquareClick` that calls `handleClick(0)`, a function like `handleSecondSquareClick` that calls `handleClick(1)`, and so on. You would pass (rather than call) these functions down as props like `onSquareClick={handleFirstSquareClick}`. This would solve the infinite loop.
->>>>>>> 68f417a600c7d7b8c4131e39f8a843a856ae3909
+
 
 ເຖິງຢ່າງໃດກໍຕາມ, ການກຳນົດຟັງຊັ່ນທີ່ແຕກຕ່າງກັນ 9 ຟັງຊັ່ນ ແລະ ຕັ້ງຊື່ໃຫ້ກັບແຕ່ລະຟັງຊັ່ນນັ້ນມີລາຍລະອຽດຫຼາຍເກີນໄປ, ລອງເຮັດແບບນີ້ແທນ:
 
@@ -2088,17 +2078,7 @@ export default function Game() {
 }
 ```
 
-<<<<<<< HEAD
 ທ່ານສາມາດເບິ່ງໄດ້ວ່າ code ຂອງທ່ານຄວນເປັນແນວໃດໃນດ້ານລຸ່ມນີ້. ສັງເກດວ່າທ່ານຄວນເຫັນຂໍ້ຜິດພາດໃນ console developer tools ທີ່ບອກວ່າ: ``Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `Game`.`` ທ່ານຈະແປງຂໍ້ຜິດພາດນີ້ໃນຫົວຂໍ້ຕໍ່ໄປ.
-=======
-You can see what your code should look like below. Note that you should see an error in the developer tools console that says: 
-
-<ConsoleBlock level="warning">
-Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of &#96;Game&#96;.
-</ConsoleBlock>
-  
-You'll fix this error in the next section.
->>>>>>> 68f417a600c7d7b8c4131e39f8a843a856ae3909
 
 <Sandpack>
 
@@ -2291,11 +2271,10 @@ body {
 <li>Alexa: 5 tasks left</li>
 ```
 
-<<<<<<< HEAD
 ນອກເໜືອຈາກການອັບເດດ count ແລ້ວ, ການອ່ານໂດຍມະນຸດອາດບອກວ່າທ່ານສະຫຼັບຄຳສັ່ງຂອງ Alexa ແລະ Ben ແລະ ເພີ່ມ Claudia ລະຫວ່າງ Alexa ແລະ Ben. ເຖິງຢ່າງໃດກໍຕາມ, React ເປັນໂປຣແກຣມຄອມພິວເຕີ ແລະ ບໍ່ສາມາດຮູ້ວ່າທ່ານຕ້ອງການຫຍັງ, ດັ່ງນັ້ນທ່ານຕ້ອງໄດ້ລະບຸ _key_ property ສຳລັບແຕ່ລະລາຍການໃນລາຍການເພື່ອແຍກຄວາມແຕກຕ່າງລະຫວ່າງແຕ່ລະລາຍການຂອງກັນ ແລະ ກັນ. ຖ້່າຂໍ້ມູນຂອງທ່ານມາຈາກຖານຂໍ້ມູນ, ID ຖານຂໍ້ມູນ Alexa, Ben ແລະ Claudia  ສາມາດໃຊ້ເປັນ key ໄດ້.
-=======
-In addition to the updated counts, a human reading this would probably say that you swapped Alexa and Ben's ordering and inserted Claudia between Alexa and Ben. However, React is a computer program and does not know what you intended, so you need to specify a _key_ property for each list item to differentiate each list item from its siblings. If your data was from a database, Alexa, Ben, and Claudia's database IDs could be used as keys.
->>>>>>> 68f417a600c7d7b8c4131e39f8a843a856ae3909
+
+
+
 
 ```js {1}
 <li key={user.id}>

src/content/reference/react-dom/components/input.md

@@ -34,7 +34,8 @@ To display an input, render the [built-in browser `<input>`](https://developer.m
 
 <Canary>
 
-React's extensions to the `formAction` prop are currently only available in React's Canary and experimental channels. In stable releases of React, `formAction` works only as a [built-in browser HTML component](/reference/react-dom/components#all-html-components). Learn more about [React's release channels here](/community/versioning-policy#all-release-channels).
+
+React's extensions to the `formAction` prop are currently only available in React's Canary and experimental channels. In stable releases of React `formAction` works only as a [built-in browser HTML component](https://react.dev/reference/react-dom/components#all-html-components). Learn more about [React's release channels here](/community/versioning-policy#all-release-channels).
 
 </Canary>