From eb78d4de39bc5ea7d4b328fed9d5b2ee606acb33 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Haukur=20P=C3=A1ll=20Hallvar=C3=B0sson?= <hph@hph.is>
Date: Sat, 29 Apr 2023 13:53:05 +0000
Subject: [PATCH] =?UTF-8?q?Fyrstu=20skrefin=20a=C3=B0=20=C3=BE=C3=BD=C3=B0?=
 =?UTF-8?q?ingu=20fyrstu=20skrefa?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Layout/HomeContent.js    |  10 +-
 src/components/Layout/Toc.tsx           |   2 +-
 src/components/Layout/TopNav/TopNav.tsx |  12 +-
 src/components/MDX/MDXComponents.tsx    |   2 +-
 src/components/Seo.tsx                  |   2 +-
 src/content/index.md                    |   4 +-
 src/content/learn/index.md              | 375 ++++++++++++------------
 src/sidebarHome.json                    |   6 +-
 src/sidebarLearn.json                   |  10 +-
 src/utils/prepareMDX.js                 |   2 +-
 10 files changed, 214 insertions(+), 211 deletions(-)

diff --git a/src/components/Layout/HomeContent.js b/src/components/Layout/HomeContent.js
index 0597642ae..6b85ba4dd 100644
--- a/src/components/Layout/HomeContent.js
+++ b/src/components/Layout/HomeContent.js
@@ -131,7 +131,7 @@ export function HomeContent() {
             React
           </h1>
           <p className="text-4xl font-display max-w-lg md:max-w-full py-1 text-center text-secondary dark:text-primary-dark leading-snug self-center">
-            The library for web and native user interfaces
+            Forritasafnið fyrir notendaviðmót á vefnum og heimavangi
           </p>
           <div className="mt-5 self-center flex gap-2 w-full sm:w-auto flex-col sm:flex-row">
             <ButtonLink
@@ -139,16 +139,16 @@ export function HomeContent() {
               type="primary"
               size="lg"
               className="w-full sm:w-auto justify-center"
-              label="Learn React">
-              Learn React
+              label="Lærðu React">
+              Lærðu React
             </ButtonLink>
             <ButtonLink
               href={'/reference/react'}
               type="secondary"
               size="lg"
               className="w-full sm:w-auto justify-center"
-              label="API Reference">
-              API Reference
+              label="Forritaskil">
+              Forritaskil
             </ButtonLink>
           </div>
         </div>
diff --git a/src/components/Layout/Toc.tsx b/src/components/Layout/Toc.tsx
index a24bbced6..8a727971c 100644
--- a/src/components/Layout/Toc.tsx
+++ b/src/components/Layout/Toc.tsx
@@ -16,7 +16,7 @@ export function Toc({headings}: {headings: Toc}) {
     <nav role="navigation" className="pt-20 sticky top-0 right-0">
       {headings.length > 0 && (
         <h2 className="mb-3 lg:mb-3 uppercase tracking-wide font-bold text-sm text-secondary dark:text-secondary-dark px-4 w-full">
-          On this page
+          Á þessari síðu
         </h2>
       )}
       <div
diff --git a/src/components/Layout/TopNav/TopNav.tsx b/src/components/Layout/TopNav/TopNav.tsx
index 23860a16f..94c746328 100644
--- a/src/components/Layout/TopNav/TopNav.tsx
+++ b/src/components/Layout/TopNav/TopNav.tsx
@@ -268,7 +268,7 @@ export default function TopNav({
                 )}
                 onClick={onOpenSearch}>
                 <IconSearch className="mr-3 align-middle text-gray-30 shrink-0 group-betterhover:hover:text-gray-70" />
-                Search
+                Leit
                 <span className="ml-auto hidden sm:flex item-center mr-1">
                   <Kbd data-platform="mac">⌘</Kbd>
                   <Kbd data-platform="win" wide>
@@ -281,25 +281,25 @@ export default function TopNav({
             <div className="text-base justify-center items-center gap-1.5 flex 3xl:flex-1 flex-row 3xl:justify-end">
               <div className="mx-2.5 gap-1.5 hidden lg:flex">
                 <NavItem isActive={section === 'learn'} url="/learn">
-                  Learn
+                  Lærðu
                 </NavItem>
                 <NavItem
                   isActive={section === 'reference'}
                   url="/reference/react">
-                  Reference
+                  Uppflettirit
                 </NavItem>
                 <NavItem isActive={section === 'community'} url="/community">
-                  Community
+                  Samfélag
                 </NavItem>
                 <NavItem isActive={section === 'blog'} url="/blog">
-                  Blog
+                  Blogg
                 </NavItem>
               </div>
               <div className="flex w-full md:hidden"></div>
               <div className="flex items-center -space-x-2.5 xs:space-x-0 ">
                 <div className="flex md:hidden">
                   <button
-                    aria-label="Search"
+                    aria-label="Leit"
                     type="button"
                     className="active:scale-95 transition-transform flex md:hidden w-12 h-12 rounded-full items-center justify-center hover:bg-secondary-button hover:dark:bg-secondary-button-dark outline-link"
                     onClick={onOpenSearch}>
diff --git a/src/components/MDX/MDXComponents.tsx b/src/components/MDX/MDXComponents.tsx
index ba531c9f0..edfb09f58 100644
--- a/src/components/MDX/MDXComponents.tsx
+++ b/src/components/MDX/MDXComponents.tsx
@@ -173,7 +173,7 @@ function YouWillLearn({
   children: any;
   isChapter?: boolean;
 }) {
-  let title = isChapter ? 'In this chapter' : 'You will learn';
+  let title = isChapter ? 'Í þessum kafla' : 'Þú munt læra';
   return <SimpleCallout title={title}>{children}</SimpleCallout>;
 }
 
diff --git a/src/components/Seo.tsx b/src/components/Seo.tsx
index e76df63e2..faf15acd3 100644
--- a/src/components/Seo.tsx
+++ b/src/components/Seo.tsx
@@ -42,7 +42,7 @@ function getDomain(languageCode: string): string {
 export const Seo = withRouter(
   ({
     title,
-    description = 'The library for web and native user interfaces',
+    description = 'React – Forritasafnið fyrir notendaviðmót á vefnum og heimavangi',
     image = '/images/og-default.png',
     router,
     children,
diff --git a/src/content/index.md b/src/content/index.md
index 0ef5df597..93405457c 100644
--- a/src/content/index.md
+++ b/src/content/index.md
@@ -1,7 +1,7 @@
 ---
 id: home
-title: React – The library for web and native user interfaces
+title: React – Forritasafnið fyrir notendaviðmót á vefnum og heimavangi
 permalink: index.html
 ---
 
-{/* See HomeContent.js */}
\ No newline at end of file
+{/* See HomeContent.js */}
diff --git a/src/content/learn/index.md b/src/content/learn/index.md
index b57655bc4..6fc6372e3 100644
--- a/src/content/learn/index.md
+++ b/src/content/learn/index.md
@@ -1,71 +1,73 @@
 ---
-title: Quick Start
+title: Fyrstu skref
 ---
 
 <Intro>
 
-Welcome to the React documentation! This page will give you an introduction to the 80% of React concepts that you will use on a daily basis.
+Velkomin í skjalbúnað Reacts! Þessi síða veitir innsýn í öll þau helstu hugtök sem þú þarft að kunna skil á til að geta notað React dagsdaglega.
 
 </Intro>
 
 <YouWillLearn>
 
-- How to create and nest components
-- How to add markup and styles
-- How to display data
-- How to render conditions and lists
-- How to respond to events and update the screen
-- How to share data between components
+- Að búa til og falda íhluti
+- Að bæta við ívafi og stílum
+- Að birta gögn
+- Að ganga frá skilyrðum og listum
+- Að bregðast við atburðum og uppfæra skjáinn
+- Að deila gögnum á milli íhluta
 
 </YouWillLearn>
 
-## Creating and nesting components {/*components*/}
+## Gerð og földun íhluta {/*components*/}
 
-React apps are made out of *components*. A component is a piece of the UI (user interface) that has its own logic and appearance. A component can be as small as a button, or as large as an entire page.
+React forrit eru gerð úr *íhlutum*. Íhlutur er hluti úr viðmótinu sem hefur sína eigin virkni og útlit. Íhlutur getur verið eins lítill og takki, eða eins stór og heil síða.
 
-React components are JavaScript functions that return markup:
+Íhlutir í React eru JavaScript föll sem skila ívafi:
 
 ```js
-function MyButton() {
+function TakinnMinn() {
   return (
-    <button>I'm a button</button>
+    <button>
+      Ég er takki
+    </button>
   );
 }
 ```
 
-Now that you've declared `MyButton`, you can nest it into another component:
+Nú þegar þú hefur skilgreint fallið `TakkinnMinn`, geturðu faldað hann inn í annan íhlut.
 
 ```js {5}
-export default function MyApp() {
+export default function Forrit() {
   return (
     <div>
-      <h1>Welcome to my app</h1>
-      <MyButton />
+      <h1>Velkomin í forritið mitt</h1>
+      <TakkinnMinn />
     </div>
   );
 }
 ```
 
-Notice that `<MyButton />` starts with a capital letter. That's how you know it's a React component. React component names must always start with a capital letter, while HTML tags must be lowercase.
+Taktu eftir því að `<TakkinnMinn />` hefst á stórum staf. Það er þannig sem þú veist að þetta er React íhlutur. HTML merki eru alltaf í lágstöfum en React íhlutir verða alltaf að byrja á hástafi.
 
-Have a look at the result:
+Sjáum nú hvað kemur út úr þessu:
 
 <Sandpack>
 
 ```js
-function MyButton() {
+function TakkinnMinn() {
   return (
     <button>
-      I'm a button
+      Ég er takki
     </button>
   );
 }
 
-export default function MyApp() {
+export default function Forrit() {
   return (
     <div>
-      <h1>Welcome to my app</h1>
-      <MyButton />
+      <h1>Velkomin í forritið mitt</h1>
+      <TakkinnMinn />
     </div>
   );
 }
@@ -73,91 +75,91 @@ export default function MyApp() {
 
 </Sandpack>
 
-The `export default` keywords specify the main component in the file. If you're not familiar with some piece of JavaScript syntax, [MDN](https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export) and [javascript.info](https://javascript.info/import-export) have great references.
+Setningin `export default` tilgreinir aðalíhlutinn í skrá. Ef þú kannast ekki við eitthvað í málskipan JavaScripts þá getur skjalbúnaðurinn á [MDN](https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export) og [javascript.info](https://javascript.info/import-export) verið nytsamlegur.
 
-## Writing markup with JSX {/*writing-markup-with-jsx*/}
+## Gerð ívafs með JSX {/*writing-markup-with-jsx*/}
 
-The markup syntax you've seen above is called *JSX*. It is optional, but most React projects use JSX for its convenience. All of the [tools we recommend for local development](/learn/installation) support JSX out of the box.
+Ívafsmálskipanin sem þú kynntist að ofan heitir *JSX*. Notkun hennar er valkvæð, en langflest React verkefni nota JSX vegna þess að það er hentugra en að sleppa því. Öll [tólin sem við mælum með fyrir staðbundna þróun](/learn/installation) styðja JSX án frekari uppsetningar.
 
-JSX is stricter than HTML. You have to close tags like `<br />`. Your component also can't return multiple JSX tags. You have to wrap them into a shared parent, like a `<div>...</div>` or an empty `<>...</>` wrapper:
+JSX er strangari en HTML. Þú verður að loka öllum merkjum eins og `<br />`. Íhlutirnir þínir geta ekki heldur skilað mörgum JSX merkjum. Þú verður að falda þeim í sameiginlegt yfirmerki, eins og `<div>...</div>` eða tómt `<>...</>` brot:
 
 ```js {3,6}
-function AboutPage() {
+function UpplýsingaSíða() {
   return (
     <>
-      <h1>About</h1>
-      <p>Hello there.<br />How do you do?</p>
+      <h1>Um okkur</h1>
+      <p>Halló.<br />Hvað er títt?</p>
     </>
   );
 }
 ```
 
-If you have a lot of HTML to port to JSX, you can use an [online converter.](https://transform.tools/html-to-jsx)
+Ef þú ert með mjög mikið HTML sem þarf að flytja yfir í JSX þá geturðu notað [vefþýðanda](https://transform.tools/html-to-jsx) til að einfalda verkið.
 
-## Adding styles {/*adding-styles*/}
+## Stílar {/*adding-styles*/}
 
-In React, you specify a CSS class with `className`. It works the same way as the HTML [`class`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class) attribute:
+Í React er klasi tilgreindur með `className`. Það virkar á sama máta og [klasaeigindið](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class) í HTML:
 
 ```js
-<img className="avatar" />
+<img className="gengill" />
 ```
 
-Then you write the CSS rules for it in a separate CSS file:
+Þá geturðu skrifað CSS reglurnar í sér skrá:
 
 ```css
-/* In your CSS */
-.avatar {
+/* Í CSS skrá */
+.gengill {
   border-radius: 50%;
 }
 ```
 
-React does not prescribe how you add CSS files. In the simplest case, you'll add a [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) tag to your HTML. If you use a build tool or a framework, consult its documentation to learn how to add a CSS file to your project.
+React er ekki með neina tiltekna stefnu varðandi CSS skrár og skipar þér ekki fyrir hvernig skuli notar þær. Í einfaldasta tilfellinu bætirðu við [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) merki í HTML kóðanum þínum. Ef þú notar tól til að smíða kóðann þinn, eða forritasafn, skaltu athuga skjalbúnað þess til að kynna þér hvernig sé best að bæta við CSS skrám í verkefnið þitt.
 
-## Displaying data {/*displaying-data*/}
+## Að birta gögn {/*displaying-data*/}
 
-JSX lets you put markup into JavaScript. Curly braces let you "escape back" into JavaScript so that you can embed some variable from your code and display it to the user. For example, this will display `user.name`:
+JSX gerir þér kleift að láta ívaf beint inn í JavaScript. Með slaufusvigum geturðu „sloppið aftur“ í JavaScript til að ívefja breytu úr kóðanum og sýna notandanum. Til dæmis birtir þetta gildi `notandi.nafn`:
 
 ```js {3}
 return (
   <h1>
-    {user.name}
+    {notandi.nafn}
   </h1>
 );
 ```
 
-You can also "escape into JavaScript" from JSX attributes, but you have to use curly braces *instead of* quotes. For example, `className="avatar"` passes the `"avatar"` string as the CSS class, but `src={user.imageUrl}` reads the JavaScript `user.imageUrl` variable value, and then passes that value as the `src` attribute:
+Þú getur líka „sloppið inn í JavaScript“ í gegnum JSX eigind, en þú verður að nota slaufusviga *í stað* gæsalappa. Til dæmis flytur `className="gengill"` út `"gengill"` strenginn sem CSS klasa, en `src={notandi.gengilsVeffang}` les JavaScript gildið úr breytunni `notandi.gengilsVeffang` og flytur það svo inn í `src` eigindið.
 
 ```js {3,4}
 return (
   <img
-    className="avatar"
-    src={user.imageUrl}
+    className="gengill"
+    src={notandi.gengilsVeffang}
   />
 );
 ```
 
-You can put more complex expressions inside the JSX curly braces too, for example, [string concatenation](https://javascript.info/operators#string-concatenation-with-binary):
+Þú getur látið flóknara segðamál inn í JSX slaufusvigana líka, til dæmis [strengjasamskeytingu](https://javascript.info/operators#string-concatenation-with-binary):
 
 <Sandpack>
 
 ```js
-const user = {
-  name: 'Hedy Lamarr',
-  imageUrl: 'https://i.imgur.com/yXOvdOSs.jpg',
-  imageSize: 90,
+const notandi = {
+  nafn: 'Hedy Lamarr',
+  gengilsVeffang: 'https://i.imgur.com/yXOvdOSs.jpg',
+  gengilsStærð: 90,
 };
 
-export default function Profile() {
+export default function Umgjörð() {
   return (
     <>
-      <h1>{user.name}</h1>
+      <h1>{notandi.nafn}</h1>
       <img
-        className="avatar"
-        src={user.imageUrl}
-        alt={'Photo of ' + user.name}
+        className="gengill"
+        src={notandi.gengilsVeffang}
+        alt={'Ljósmynd af ' + notandi.nafn}
         style={{
-          width: user.imageSize,
-          height: user.imageSize
+          width: notandi.gengilsStærð,
+          height: notandi.gengilsStærð
         }}
       />
     </>
@@ -166,205 +168,206 @@ export default function Profile() {
 ```
 
 ```css
-.avatar {
+.gengill {
   border-radius: 50%;
 }
 
-.large {
+.stor {
   border: 4px solid gold;
 }
 ```
 
 </Sandpack>
 
-In the above example, `style={{}}` is not a special syntax, but a regular `{}` object inside the `style={ }` JSX curly braces. You can use the `style` attribute when your styles depend on JavaScript variables.
+Í dæminu að ofan er `style={{}}` ekki sérstök málskipan, heldur venjulegur `{}` hlutur innan `style={ }` JSX slaufusviga. Þú getur notað `style` eigindið þegar stíllinn veltur á JavaScript breytum.
 
-## Conditional rendering {/*conditional-rendering*/}
+## Skilyrt birting {/*conditional-rendering*/}
 
-In React, there is no special syntax for writing conditions. Instead, you'll use the same techniques as you use when writing regular JavaScript code. For example, you can use an [`if`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) statement to conditionally include JSX:
+Í React er engin sérstök málskipan til að skrifa skilyrtar setningar. Þess í stað notarðu sömu aðferðir og í venjulegum JavaScript kóða. Til dæmis geturðu notað [`if`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) setningu til að birta JSX skilyrt:
 
 ```js
-let content;
-if (isLoggedIn) {
-  content = <AdminPanel />;
+let efni;
+if (erInnskráður) {
+  efni = <Mælaborð />;
 } else {
-  content = <LoginForm />;
+  efni = <Innskráning />;
 }
 return (
   <div>
-    {content}
+    {efni}
   </div>
 );
 ```
 
-If you prefer more compact code, you can use the [conditional `?` operator.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) Unlike `if`, it works inside JSX:
+Ef þér þykir styttri kóði betri þá geturðu notað [skilyrtan `?` virka.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) Ólíkt `if` setningunni má nota hann beint inni í JSX:
 
 ```js
 <div>
-  {isLoggedIn ? (
-    <AdminPanel />
+  {erInnskráður ? (
+    <Mælaborð />
   ) : (
-    <LoginForm />
+    <Innskráning />
   )}
 </div>
 ```
 
-When you don't need the `else` branch, you can also use a shorter [logical `&&` syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND#short-circuit_evaluation):
+Þegar þú þarft á skilyrta stökkinu `else` að halda geturðu líka notað styttri [`&&` rökaðgerð](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND#short-circuit_evaluation):
 
 ```js
 <div>
-  {isLoggedIn && <AdminPanel />}
+  {erInnskráður && <Mælaborð />}
 </div>
 ```
 
-All of these approaches also work for conditionally specifying attributes. If you're unfamiliar with some of this JavaScript syntax, you can start by always using `if...else`.
+Þessar nálganir virka líka til að tilgreina eigind skilyrt. Ef þú kannast ekki við þessa JavaScript málskipan þá geturðu byrjað á að nota alltaf `if...else`.
 
-## Rendering lists {/*rendering-lists*/}
+## Listar {/*rendering-lists*/}
 
-You will rely on JavaScript features like [`for` loop](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for) and the [array `map()` function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) to render lists of components.
+Til að birta lista af einingum muntu geta notfært þér JavaScript eiginleika eins og [`for` lykkjur](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for) og [`map()` fallið](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map).
 
-For example, let's say you have an array of products:
+Gefum okkur að þú sért með vörulista:
 
 ```js
-const products = [
-  { title: 'Cabbage', id: 1 },
-  { title: 'Garlic', id: 2 },
-  { title: 'Apple', id: 3 },
+const vörur = [
+  { nafn: 'Kál', kennimerki: 1 },
+  { nafn: 'Hvítlaukur', kennimerki: 2 },
+  { nafn: 'Epli', kennimerki: 3 },
 ];
 ```
 
-Inside your component, use the `map()` function to transform an array of products into an array of `<li>` items:
+Notaðu `map()` fallið inni í íhlutnum þínum til að umbreyta vörulistanum úr fylki af hlutum í fylki af `<li>` merkjum:
 
 ```js
-const listItems = products.map(product =>
-  <li key={product.id}>
-    {product.title}
+const stök = vörur.map(vara =>
+  <li key={vara.kennimerki}>
+    {vara.nafn}
   </li>
 );
 
 return (
-  <ul>{listItems}</ul>
+  <ul>{stök}</ul>
 );
 ```
 
-Notice how `<li>` has a `key` attribute. For each item in a list, you should pass a string or a number that uniquely identifies that item among its siblings. Usually, a key should be coming from your data, such as a database ID. React uses your keys to know what happened if you later insert, delete, or reorder the items.
+Taktu eftir því að `<li>` er með `key` eigind. Fyrir hvert stak í listanum þarftu að tilgreina streng eða númer sem lykil hlutsins í listanum. Venjulega kemur lykill beint úr gögnunum þínum, til dæmis kennimerki úr gagnagrunni.
+React notar lyklana til að vita hvað gerðist ef þú síðar bætir við, eyðir, eða endurraðar stökum.
 
 <Sandpack>
 
 ```js
-const products = [
-  { title: 'Cabbage', isFruit: false, id: 1 },
-  { title: 'Garlic', isFruit: false, id: 2 },
-  { title: 'Apple', isFruit: true, id: 3 },
+const vörur = [
+  { nafn: 'Kál', erÁvöxtur: false, kennimerki: 1 },
+  { nafn: 'Hvítlaukur', erÁvöxtur: false, kennimerki: 2 },
+  { nafn: 'epli', erÁvöxtur: true, kennimerki: 3 },
 ];
 
-export default function ShoppingList() {
-  const listItems = products.map(product =>
+export default function Innkaupalisti() {
+  const atriði = vörur.map(vara =>
     <li
-      key={product.id}
+      key={vara.kennimerki}
       style={{
-        color: product.isFruit ? 'magenta' : 'darkgreen'
+        color: vara.erÁvöxtur ? 'magenta' : 'darkgreen'
       }}
     >
-      {product.title}
+      {vara.nafn}
     </li>
   );
 
   return (
-    <ul>{listItems}</ul>
+    <ul>{atriði}</ul>
   );
 }
 ```
 
 </Sandpack>
 
-## Responding to events {/*responding-to-events*/}
+## Að bregðast við atburðum {/*responding-to-events*/}
 
-You can respond to events by declaring *event handler* functions inside your components:
+Þú getur brugðist við atburðum með því að skilgreina *sýslaraföll* inni í íhlutunum þínum:
 
 ```js {2-4,7}
-function MyButton() {
-  function handleClick() {
-    alert('You clicked me!');
+function TakkinnMinn() {
+  function sýslaSmell() {
+    alert('Þú smelltir á mig!');
   }
 
   return (
-    <button onClick={handleClick}>
-      Click me
+    <button onClick={sýslaSmell}>
+      Smelltu á mig
     </button>
   );
 }
 ```
 
-Notice how `onClick={handleClick}` has no parentheses at the end! Do not _call_ the event handler function: you only need to *pass it down*. React will call your event handler when the user clicks the button.
+Taktu eftir því að `onClick={sýslaSmell}` er ekki með sviga á endanum. Ekki _kalla_ á sýslarafallið: þú þarft aðeins að *senda það*. React mun sjá um að kalla á sýslarafallið þitt þegar notandinn smellir á takkann.
 
-## Updating the screen {/*updating-the-screen*/}
+## Uppfærslur á skjánum {/*updating-the-screen*/}
 
-Often, you'll want your component to "remember" some information and display it. For example, maybe you want to count the number of times a button is clicked. To do this, add *state* to your component.
+Stundum vill maður uppfæra íhlut til að „muna“ einhverjar tilteknar upplýsingar og svo birta þær. Til dæmis gætirðu mögulega viljað telja hversu oft er smellt á einhvern takka. Til að gera þetta geturðu bætt *stöðu* við íhlutinn.
 
-First, import [`useState`](/reference/react/useState) from React:
+Fyrst skaltu flytja inn [`useState`](/reference/react/useState) úr React:
 
 ```js
 import { useState } from 'react';
 ```
 
-Now you can declare a *state variable* inside your component:
+Þá geturðu skilgreint *stöðubreytu* inni í íhlutnum:
 
 ```js
-function MyButton() {
-  const [count, setCount] = useState(0);
+function TakkinnMinn() {
+  const [smellir, setjaSmelli] = useState(0);
   // ...
 ```
 
-You’ll get two things from `useState`: the current state (`count`), and the function that lets you update it (`setCount`). You can give them any names, but the convention is to write `[something, setSomething]`.
+Þú færð tvö stök úr `useState`: núverandi stöðu (`smellir`) og fallið sem gerir þér kleift að uppfæra gildið (`setjaSmelli`). Þú getur notað hvaða breytunöfn sem er, en venjan er að skrifa `[eitthvað, setjaEitthvað]`.
 
-The first time the button is displayed, `count` will be `0` because you passed `0` to `useState()`. When you want to change state, call `setCount()` and pass the new value to it. Clicking this button will increment the counter:
+Breytan `smellir` verður `0` í fyrsta skiptið sem takkinn er birtur vegna þess að þú sendir `0` í `useState()`. Kallaðu `setjaSmelli` þegar þú vilt breyta stöðu og sendu nýja gildið. Með því að smella á þennan takka uppfærist teljarinn:
 
 ```js {5}
-function MyButton() {
-  const [count, setCount] = useState(0);
+function TakkinnMinn() {
+  const [smellir, setjaSmelli] = useState(0);
 
-  function handleClick() {
-    setCount(count + 1);
+  function sýslaSmell() {
+    setjaSmelli(smellir + 1);
   }
 
   return (
-    <button onClick={handleClick}>
-      Clicked {count} times
+    <button onClick={sýslaSmell}>
+      Smellti í {smellir} skipti
     </button>
   );
 }
 ```
 
-React will call your component function again. This time, `count` will be `1`. Then it will be `2`. And so on.
+React mun kalla á fallið þitt aftur. Breytan `smellir` mun í þetta sinn mun hafa gildið `1`, svo mun það vera `2`, og svo koll af kolli.
 
-If you render the same component multiple times, each will get its own state. Click each button separately:
+Ef þú birtir sama íhlut oftar en einu sinni þá mun hver birting hafa sína eigin stöðu. Prófaðu að smella á hvorn takkan:
 
 <Sandpack>
 
 ```js
 import { useState } from 'react';
 
-export default function MyApp() {
+export default function Forrit() {
   return (
     <div>
-      <h1>Counters that update separately</h1>
-      <MyButton />
-      <MyButton />
+      <h1>Teljarar með aðskildri stöðu</h1>
+      <TakkinnMinn />
+      <TakkinnMinn />
     </div>
   );
 }
 
-function MyButton() {
-  const [count, setCount] = useState(0);
+function TakkinnMinn() {
+  const [smellir, setjaSmelli] = useState(0);
 
-  function handleClick() {
-    setCount(count + 1);
+  function sýslaSmell() {
+    setjaSmelli(smellir + 1);
   }
 
   return (
-    <button onClick={handleClick}>
-      Clicked {count} times
+    <button onClick={sýslaSmell}>
+      Smellti í {smellir} skipti
     </button>
   );
 }
@@ -379,144 +382,144 @@ button {
 
 </Sandpack>
 
-Notice how each button "remembers" its own `count` state and doesn't affect other buttons.
+Taktu eftir því að hver takki „man“ stöðuna á eigin breytu (þ.e. `smellir`) og hefur ekki áhrif á hinn takkann.
 
-## Using Hooks {/*using-hooks*/}
+## Notkun króka {/*using-hooks*/}
 
-Functions starting with `use` are called *Hooks*. `useState` is a built-in Hook provided by React. You can find other built-in Hooks in the [API reference.](/reference/react) You can also write your own Hooks by combining the existing ones.
+Föll með forskeytinu `use` (þ.e. „nota“) eru kölluð *krókar*. `useState` er innbyggður krókur frá React. Þú getur fundið fleiri innbyggða króka í [forritaskilum.](/reference/react) Þú getur einnig skrifað þína eigin króka frá grunni eða með því að sameina aðra króka.
 
-Hooks are more restrictive than other functions. You can only call Hooks *at the top* of your components (or other Hooks). If you want to use `useState` in a condition or a loop, extract a new component and put it there.
+Krókar eru háðir ákveðnum kvöðum í samanburði við venjuleg föll. Þú getur aðeins kallað í króka *efst* í íhlutunum þínum eða efst í öðrum krókum. Ef þú vilt nota `useState` í skilyrtri setningu eða lykkju skaltu þátta það í nýjan íhlut.
 
-## Sharing data between components {/*sharing-data-between-components*/}
+## Að deila gögnum á milli íhluta {/*sharing-data-between-components*/}
 
-In the previous example, each `MyButton` had its own independent `count`, and when each button was clicked, only the `count` for the button clicked changed:
+Í síðasta dæmi hafði hver `TakkinnMinn` sitt eigið gildi fyrir `smellir` breytuna og aðeins gildi þess takka sem smellt var á uppfærðist.
 
 <DiagramGroup>
 
-<Diagram name="sharing_data_child" height={367} width={407} alt="Diagram showing a tree of three components, one parent labeled MyApp and two children labeled MyButton. Both MyButton components contain a count with value zero.">
+<Diagram name="sharing_data_child" height={367} width={407} alt="Skýringarmynd sem sýnir tré með þremur íhlutum, foreldri merkt MyApp og börn þess merkt MyButton. Hvor takkaíhlutur inniheldur fjölda smella með gildinu núll.">
 
-Initially, each `MyButton`'s `count` state is `0`
+Í upphafi er gildi beggja `MyButton` íhlutanna núllstillt.
 
 </Diagram>
 
-<Diagram name="sharing_data_child_clicked" height={367} width={407} alt="The same diagram as the previous, with the count of the first child MyButton component highlighted indicating a click with the count value incremented to one. The second MyButton component still contains value zero." >
+<Diagram name="sharing_data_child_clicked" height={367} width={407} alt="Sama skýringarmynd og á undan, með fjölda smella í fyrsta MyButton íhlutnum undirstrikað til að sýna að smellur hefur uppfært fjöldann í einn smell. Hinn takkinn er enn með gildið núll." >
 
-The first `MyButton` updates its `count` to `1`
+Fyrri `MyButton` uppfærir `count` gildið í `1`.
 
 </Diagram>
 
 </DiagramGroup>
 
-However, often you'll need components to *share data and always update together*.
+Oft muntu hins vegar þurfa að láta íhluti *deila gögnum og uppfærast saman*.
 
-To make both `MyButton` components display the same `count` and update together, you need to move the state from the individual buttons "upwards" to the closest component containing all of them.
+Til að láta báða `MyButton` íhlutina birta sama `count` gildið og uppfærast saman þarftu að hífa gildið upp úr takkaíhlutunum og yfir í næsta sameiginlega foreldrið sem inniheldur þá báða.
 
-In this example, it is `MyApp`:
+Í þessu tilfelli er það `MyApp` íhluturinn:
 
 <DiagramGroup>
 
-<Diagram name="sharing_data_parent" height={385} width={410} alt="Diagram showing a tree of three components, one parent labeled MyApp and two children labeled MyButton. MyApp contains a count value of zero which is passed down to both of the MyButton components, which also show value zero." >
+<Diagram name="sharing_data_parent" height={385} width={410} alt="Skýringarmynd sem sýnir tré þriggja íhluta, eitt foreldri merkt MyApp og tvo afkomendur merkta MyButton. Í MyApp er fjöldi smella núllstilltur, sem er svo fluttur niður í MyButton íhlutina, sem sýna líka gildið núll." >
 
-Initially, `MyApp`'s `count` state is `0` and is passed down to both children
+Upphaflega er gildi `count` breytunnar í `MyApp` núllstillt og svo er það sent niður í takkana.
 
 </Diagram>
 
-<Diagram name="sharing_data_parent_clicked" height={385} width={410} alt="The same diagram as the previous, with the count of the parent MyApp component highlighted indicating a click with the value incremented to one. The flow to both of the children MyButton components is also highlighted, and the count value in each child is set to one indicating the value was passed down." >
+<Diagram name="sharing_data_parent_clicked" height={385} width={410} alt="Sama skýringarmynd og á undan en með fjölda smella undirstrikaðan til að merkja að smellur hefur uppfært gildið úr núll yfir í einn. Flæðið til MyButton takkanna er líka undirstrikað, og gildi þeirra hefur verið uppfært til að merkja að það hefur flust úr foreldri." >
 
-On click, `MyApp` updates its `count` state to `1` and passes it down to both children
+Þegar smellt er uppfærir `MyApp` gildið á `count` stöðunni í `1` og sendir til beggja afkomenda.
 
 </Diagram>
 
 </DiagramGroup>
 
-Now when you click either button, the `count` in `MyApp` will change, which will change both of the counts in `MyButton`. Here's how you can express this in code.
+Nú skiptir ekki lengur máli á hvorn takkann þú smellir, því að `smellir` staðan í `Forrit` mun breytast, sem uppfærir í leið gildin í íhlutnum `TakkinnMinn`.
 
-First, *move the state up* from `MyButton` into `MyApp`:
+Fyrst skaltu *hífa stöðuna upp* úr íhlutnum `TakkinnMinn` yfir í `Forrit`:
 
 ```js {2-6,18}
-export default function MyApp() {
-  const [count, setCount] = useState(0);
+export default function Forrit() {
+  const [smellir, setjaSmelli] = useState(0);
 
-  function handleClick() {
-    setCount(count + 1);
+  function sýslaSmell() {
+    setjaSmelli(smellir + 1);
   }
 
   return (
     <div>
-      <h1>Counters that update separately</h1>
-      <MyButton />
-      <MyButton />
+      <h1>Teljarar með aðskildri stöðu</h1>
+      <TakkinnMinn />
+      <TakkinnMinn />
     </div>
   );
 }
 
-function MyButton() {
-  // ... we're moving code from here ...
+function TakkinnMinn() {
+  // ... við hífðum kóðan upp úr þessum íhlut ...
 }
 
 ```
 
-Then, *pass the state down* from `MyApp` to each `MyButton`, together with the shared click handler. You can pass information to `MyButton` using the JSX curly braces, just like you previously did with built-in tags like `<img>`:
+Svo skaltu *senda gildið niður* úr `Forrit` í hvern `TakkinnMinn` íhlut ásamt sameiginlega sýslarafallinu. Þú getur sent íhlutnum `TakkinnMinn` gögn innan slaufusviga í JSX á sama máta og gert var áður með innbyggðum merkjum eins og `<img>`:
 
 ```js {11-12}
-export default function MyApp() {
-  const [count, setCount] = useState(0);
+export default function Forrit() {
+  const [smellir, setjaSmelli] = useState(0);
 
-  function handleClick() {
-    setCount(count + 1);
+  function sýslaSmell() {
+    setjaSmelli(smellir + 1);
   }
 
   return (
     <div>
-      <h1>Counters that update together</h1>
-      <MyButton count={count} onClick={handleClick} />
-      <MyButton count={count} onClick={handleClick} />
+      <h1>Teljarar með sameiginlegri stöðu</h1>
+      <TakkinnMinn smellir={smellir} viðSmell={sýslaSmell} />
+      <TakkinnMinn smellir={smellir} viðSmell={sýslaSmell} />
     </div>
   );
 }
 ```
 
-The information you pass down like this is called _props_. Now the `MyApp` component contains the `count` state and the `handleClick` event handler, and *passes both of them down as props* to each of the buttons.
+Upplýsingarnar sem þú sendir niður á þennan máta heita _eiginleikar_ (e. props). Nú inniheldur íhluturinn `Forrit` bæði stöðuna `smellir` og `sýslaSmell` sýslarafallið og *sendir þá báða niður sem eiginleika* til takkanna.
 
-Finally, change `MyButton` to *read* the props you have passed from its parent component:
+Að lokum skaltu uppfæra íhlutinn `TakkinnMinn` til að *lesa* eiginleikana sem þú sendir úr foreldri hans.
 
 ```js {1,3}
-function MyButton({ count, onClick }) {
+function TakkinnMinn({ smellir, viðSmell }) {
   return (
-    <button onClick={onClick}>
-      Clicked {count} times
+    <button onClick={viðSmell}>
+      Smellti í {smellir} skipti
     </button>
   );
 }
 ```
 
-When you click the button, the `onClick` handler fires. Each button's `onClick` prop was set to the `handleClick` function inside `MyApp`, so the code inside of it runs. That code calls `setCount(count + 1)`, incrementing the `count` state variable. The new `count` value is passed as a prop to each button, so they all show the new value. This is called "lifting state up". By moving state up, you've shared it between components.
+Þegar þú smellir á takkann tekur `viðSmell` sýslarafallið við. Í íhlutnum `Forrit` var eiginleikinn `viðSmell` stilltur á `sýslaSmell` til að kóðinn inni í því keyri. Sá kóði kallar á `setjaSmell(smellir + 1)`, sem eykur teljarastöðuna `smellir`. Nýja gildið á stöðunni `smellir` er sent niður sem eiginleiki til hvers takka svo að þeir innihaldi allir sama gildi. Við köllum þetta „að hífa stöðu“. Með því að flytja stöðuna upp um tréð ertu búinn að deila henni á milli íhluta.
 
 <Sandpack>
 
 ```js
 import { useState } from 'react';
 
-export default function MyApp() {
-  const [count, setCount] = useState(0);
+export default function Forrit() {
+  const [smellir, setjaSmelli] = useState(0);
 
-  function handleClick() {
-    setCount(count + 1);
+  function sýslaSmell() {
+    setjaSmelli(smellir + 1);
   }
 
   return (
     <div>
-      <h1>Counters that update together</h1>
-      <MyButton count={count} onClick={handleClick} />
-      <MyButton count={count} onClick={handleClick} />
+      <h1>Teljarar með sameiginlegri stöðu</h1>
+      <TakkinnMinn smellir={smellir} viðSmell={sýslaSmell} />
+      <TakkinnMinn smellir={smellir} viðSmell={sýslaSmell} />
     </div>
   );
 }
 
-function MyButton({ count, onClick }) {
+function TakkinnMinn({ smellir, viðSmell }) {
   return (
-    <button onClick={onClick}>
-      Clicked {count} times
+    <button onClick={viðSmell}>
+      Smellti í {smellir} skipti
     </button>
   );
 }
@@ -531,8 +534,8 @@ button {
 
 </Sandpack>
 
-## Next Steps {/*next-steps*/}
+## Næstu skref {/*next-steps*/}
 
-By now, you know the basics of how to write React code!
+Nú ættirðu að kunna grundvallaratriðin í React!
 
-Check out the [Tutorial](/learn/tutorial-tic-tac-toe) to put them into practice and build your first mini-app with React.
+Kíktu á [kennslusíðuna](/learn/tutorial-tic-tac-toe) til að byrja að notfæra þér þessa þekkingu og smíða þitt fyrsta smáforrit með React.
diff --git a/src/sidebarHome.json b/src/sidebarHome.json
index 4509c26fc..c1811009f 100644
--- a/src/sidebarHome.json
+++ b/src/sidebarHome.json
@@ -4,10 +4,10 @@
   "routes": [
     {
       "hasSectionHeader": true,
-      "sectionHeader": "GET STARTED"
+      "sectionHeader": "NOTKUN REACTS"
     },
     {
-      "title": "Quick Start",
+      "title": "Fyrstu skref",
       "path": "/learn"
     },
     {
@@ -16,7 +16,7 @@
     },
     {
       "hasSectionHeader": true,
-      "sectionHeader": "LEARN REACT"
+      "sectionHeader": "LÆRÐU Á REACT"
     },
     {
       "title": "Describing the UI",
diff --git a/src/sidebarLearn.json b/src/sidebarLearn.json
index 89d5cffca..5c6dd388f 100644
--- a/src/sidebarLearn.json
+++ b/src/sidebarLearn.json
@@ -1,13 +1,13 @@
 {
-  "title": "Learn React",
+  "title": "Lærðu á React",
   "path": "/learn",
   "routes": [
     {
       "hasSectionHeader": true,
-      "sectionHeader": "GET STARTED"
+      "sectionHeader": "NOTKUN REACTS"
     },
     {
-      "title": "Quick Start",
+      "title": "Fyrstu skref",
       "path": "/learn",
       "routes": [
         {
@@ -44,7 +44,7 @@
     },
     {
       "hasSectionHeader": true,
-      "sectionHeader": "LEARN REACT"
+      "sectionHeader": "LÆRÐU Á REACT"
     },
     {
       "title": "Describing the UI",
@@ -186,7 +186,7 @@
         },
         {
           "title": "Removing Effect Dependencies",
-          "path": "/learn/removing-effect-dependencies"              
+          "path": "/learn/removing-effect-dependencies"
         },
         {
           "title": "Reusing Logic with Custom Hooks",
diff --git a/src/utils/prepareMDX.js b/src/utils/prepareMDX.js
index 639d7db90..391f54358 100644
--- a/src/utils/prepareMDX.js
+++ b/src/utils/prepareMDX.js
@@ -65,7 +65,7 @@ function getTableOfContents(children, depth) {
   if (anchors.length > 0) {
     anchors.unshift({
       url: '#',
-      text: 'Overview',
+      text: 'Yfirsýn',
       depth: 2,
     });
   }