From daaf8446b6364bbb78a6774fbfa58fa2cab3a2b2 Mon Sep 17 00:00:00 2001
From: Miro Rauhala <4082806+mirorauhala@users.noreply.github.com>
Date: Wed, 30 Aug 2023 19:57:32 +0300
Subject: [PATCH 01/34] Translate Tic Tac Toe

---
 src/content/learn/tutorial-tic-tac-toe.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md
index 16e5f518d..e032de2af 100644
--- a/src/content/learn/tutorial-tic-tac-toe.md
+++ b/src/content/learn/tutorial-tic-tac-toe.md
@@ -1,5 +1,5 @@
 ---
-title: 'Tutorial: Tic-Tac-Toe'
+title: 'Opas: Ristinolla'
 ---
 
 <Intro>

From 86800fd4c104d57323c833cf5a9c811dd77917f9 Mon Sep 17 00:00:00 2001
From: Miro Rauhala <4082806+mirorauhala@users.noreply.github.com>
Date: Wed, 30 Aug 2023 20:14:08 +0300
Subject: [PATCH 02/34] Translate headings

---
 src/content/learn/tutorial-tic-tac-toe.md | 56 +++++++++++------------
 1 file changed, 28 insertions(+), 28 deletions(-)

diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md
index e032de2af..757c7c306 100644
--- a/src/content/learn/tutorial-tic-tac-toe.md
+++ b/src/content/learn/tutorial-tic-tac-toe.md
@@ -4,24 +4,24 @@ title: 'Opas: Ristinolla'
 
 <Intro>
 
-You will build a small tic-tac-toe game during this tutorial. This tutorial does not assume any existing React knowledge. The techniques you'll learn in the tutorial are fundamental to building any React app, and fully understanding it will give you a deep understanding of React.
+Tulet rakentamaan pienen ristinolla-pelin tässä oppaassa. Tämä opas ei oleta aikaisempaa React-osaamista. Tekniikat, joita opit oppaan aikana ovat perustavanlaatuisia mille tahansa React-sovellukselle ja niiden ymmärtäminen antaa sinulle syvällisen ymmärryksen Reactista.
 
 </Intro>
 
 <Note>
 
-This tutorial is designed for people who prefer to **learn by doing** and want to quickly try making something tangible. If you prefer learning each concept step by step, start with [Describing the UI.](/learn/describing-the-ui)
+Tämä opas on tarkoitettu henkilöille, jotka suosivat **oppimaan tekemällä** ja haluavat nopeasti kokeilla tehdä jotain konkreettista. Jos suosit oppimista jokaisen käsitteen vaiheittain, aloita [Käyttöliittymän kuvaaminen](/learn/describing-the-ui) sivulta.
 
 </Note>
 
-The tutorial is divided into several sections:
+Tämä opas on jaettu useaan osaan:
 
-- [Setup for the tutorial](#setup-for-the-tutorial) will give you **a starting point** to follow the tutorial.
-- [Overview](#overview) will teach you **the fundamentals** of React: components, props, and state.
-- [Completing the game](#completing-the-game) will teach you **the most common techniques** in React development.
-- [Adding time travel](#adding-time-travel) will give you **a deeper insight** into the unique strengths of React.
+- [Oppaan asennusvaihe](#setup-for-the-tutorial) antaa sinulle *lähtökohdan** oppaan seuraamiseen.
+- [Yleiskatsaus](#overview) opettaa sinulle Reactin **perusteet**: komponentit, propsit, ja tilan.
+- [Pelin viimeistely](#completing-the-game) opettaa sinulle **yleisimmät tekniikat** React kehityksessä.
+- [Aikamatkustuksen lisääminen](#adding-time-travel) opettaa sinulle **syvällisen ymmärryksen** Reactin uniikkeihin vahvuuksiin.
 
-### What are you building? {/*what-are-you-building*/}
+### Mitä olet rakentamassa? {/*what-are-you-building*/}
 
 In this tutorial, you'll build an interactive tic-tac-toe game with React.
 
@@ -200,7 +200,7 @@ We recommend that you check out the tic-tac-toe game above before continuing wit
 
 Once you've played around with the finished tic-tac-toe game, keep scrolling. You'll start with a simpler template in this tutorial. Our next step is to set you up so that you can start building the game.
 
-## Setup for the tutorial {/*setup-for-the-tutorial*/}
+## Oppaan asennusvaihe {/*setup-for-the-tutorial*/}
 
 In the live code editor below, click **Fork** in the top-right corner to open the editor in a new tab using the website CodeSandbox. CodeSandbox lets you write code in your browser and preview how your users will see the app you've created. The new tab should display an empty square and the starter code for this tutorial.
 
@@ -273,11 +273,11 @@ If you get stuck, don't let this stop you! Follow along online instead and try a
 
 </Note>
 
-## Overview {/*overview*/}
+## Yleiskatsaus {/*overview*/}
 
 Now that you're set up, let's get an overview of React!
 
-### Inspecting the starter code {/*inspecting-the-starter-code*/}
+### Aloituskoodin tarkastelu {/*inspecting-the-starter-code*/}
 
 In CodeSandbox you'll see three main sections:
 
@@ -346,7 +346,7 @@ Lines 1-5 brings all the necessary pieces together:
 
 The remainder of the file brings all the pieces together and injects the final product into `index.html` in the `public` folder.
 
-### Building the board {/*building-the-board*/}
+### Pelilaudan rakentaminen {/*building-the-board*/}
 
 Let's get back to `App.js`. This is where you'll spend the rest of the tutorial.
 
@@ -508,7 +508,7 @@ Psssst... That's a lot to type! It's okay to copy and paste code from this page.
 
 </Note>
 
-### Passing data through props {/*passing-data-through-props*/}
+### Datan välittäminen propseilla {/*passing-data-through-props*/}
 
 Next, you'll want to change the value of a square from empty to "X" when the user clicks on the square. With how you've built the board so far you would need to copy-paste the code that updates the square nine times (once for each square you have)! Instead of copy-pasting, React's component architecture allows you to create a reusable component to avoid messy, duplicated code.
 
@@ -702,7 +702,7 @@ body {
 
 </Sandpack>
 
-### Making an interactive component {/*making-an-interactive-component*/}
+### Interaktiivisen komponentin luominen {/*making-an-interactive-component*/}
 
 Let's fill the `Square` component with an `X` when you click it. Declare a function called `handleClick` inside of the `Square`. Then, add `onClick` to the props of the button JSX element returned from the `Square`:
 
@@ -897,7 +897,7 @@ body {
 
 </Sandpack>
 
-### React Developer Tools {/*react-developer-tools*/}
+### React kehitystyökalut {/*react-developer-tools*/}
 
 React DevTools let you check the props and the state of your React components. You can find the React DevTools tab at the bottom of the _browser_ section in CodeSandbox:
 
@@ -913,11 +913,11 @@ For local development, React DevTools is available as a [Chrome](https://chrome.
 
 </Note>
 
-## Completing the game {/*completing-the-game*/}
+## Pelin viimeistely {/*completing-the-game*/}
 
 By this point, you have all the basic building blocks for your tic-tac-toe game. To have a complete game, you now need to alternate placing "X"s and "O"s on the board, and you need a way to determine a winner.
 
-### Lifting state up {/*lifting-state-up*/}
+### Tilan nostaminen ylös {/*lifting-state-up*/}
 
 Currently, each `Square` component maintains a part of the game's state. To check for a winner in a tic-tac-toe game, the `Board` would need to somehow know the state of each of the 9 `Square` components.
 
@@ -1333,7 +1333,7 @@ The DOM `<button>` element's `onClick` attribute has a special meaning to React
 
 </Note>
 
-### Why immutability is important {/*why-immutability-is-important*/}
+### Miksi muuttumattomuus on tärkeää {/*why-immutability-is-important*/}
 
 Note how in `handleClick`, you call `.slice()` to create a copy of the `squares` array instead of modifying the existing array. To explain why, we need to discuss immutability and why immutability is important to learn.
 
@@ -1359,7 +1359,7 @@ Immutability makes complex features much easier to implement. Later in this tuto
 
 There is also another benefit of immutability. By default, all child components re-render automatically when the state of a parent component changes. This includes even the child components that weren't affected by the change. Although re-rendering is not by itself noticeable to the user (you shouldn't actively try to avoid it!), you might want to skip re-rendering a part of the tree that clearly wasn't affected by it for performance reasons. Immutability makes it very cheap for components to compare whether their data has changed or not. You can learn more about how React chooses when to re-render a component in [the `memo` API reference](/reference/react/memo).
 
-### Taking turns {/*taking-turns*/}
+### Vuorojen ottaminen {/*taking-turns*/}
 
 It's now time to fix a major defect in this tic-tac-toe game: the "O"s cannot be marked on the board.
 
@@ -1520,7 +1520,7 @@ body {
 
 </Sandpack>
 
-### Declaring a winner {/*declaring-a-winner*/}
+### Voittajan päättäminen {/*declaring-a-winner*/}
 
 Now that the players can take turns, you'll want to show when the game is won and there are no more turns to make. To do this you'll add a helper function called `calculateWinner` that takes an array of 9 squares, checks for a winner and returns `'X'`, `'O'`, or `null` as appropriate. Don't worry too much about the `calculateWinner` function; it's not specific to React:
 
@@ -1721,11 +1721,11 @@ body {
 
 </Sandpack>
 
-## Adding time travel {/*adding-time-travel*/}
+## Aikamatkustuksen lisääminen {/*adding-time-travel*/}
 
 As a final exercise, let's make it possible to "go back in time" to the previous moves in the game.
 
-### Storing a history of moves {/*storing-a-history-of-moves*/}
+### Pelin siirtojen tallentaminen {/*storing-a-history-of-moves*/}
 
 If you mutated the `squares` array, implementing time travel would be very difficult.
 
@@ -1745,7 +1745,7 @@ You'll store the past `squares` arrays in another array called `history`, which
 ]
 ```
 
-### Lifting state up, again {/*lifting-state-up-again*/}
+### Tilan nostaminen ylös, uudestaan {/*lifting-state-up-again*/}
 
 You will now write a new top-level component called `Game` to display a list of past moves. That's where you will place the `history` state that contains the entire game history.
 
@@ -2017,7 +2017,7 @@ body {
 
 </Sandpack>
 
-### Showing the past moves {/*showing-the-past-moves*/}
+### Aikaisempien liikkeiden näyttäminen {/*showing-the-past-moves*/}
 
 Since you are recording the tic-tac-toe game's history, you can now display a list of past moves to the player.
 
@@ -2247,7 +2247,7 @@ For each move in the tic-tac-toe game's history, you create a list item `<li>` w
 
 For now, you should see a list of the moves that occurred in the game and an error in the developer tools console. Let's discuss what the "key" error means.
 
-### Picking a key {/*picking-a-key*/}
+### Avaimen valinta {/*picking-a-key*/}
 
 When you render a list, React stores some information about each rendered list item. When you update a list, React needs to determine what has changed. You could have added, removed, re-arranged, or updated the list's items.
 
@@ -2286,7 +2286,7 @@ If no key is specified, React will report an error and use the array index as a
 
 Keys do not need to be globally unique; they only need to be unique between components and their siblings.
 
-### Implementing time travel {/*implementing-time-travel*/}
+### Aikamatkustuksen toteutus {/*implementing-time-travel*/}
 
 In the tic-tac-toe game's history, each past move has a unique ID associated with it: it's the sequential number of the move. Moves will never be re-ordered, deleted, or inserted in the middle, so it's safe to use the move index as a key.
 
@@ -2693,7 +2693,7 @@ body {
 
 </Sandpack>
 
-### Final cleanup {/*final-cleanup*/}
+### Loppusiivous {/*final-cleanup*/}
 
 If you look at the code very closely, you may notice that `xIsNext === true` when `currentMove` is even and `xIsNext === false` when `currentMove` is odd. In other words, if you know the value of `currentMove`, then you can always figure out what `xIsNext` should be.
 
@@ -2721,7 +2721,7 @@ export default function Game() {
 
 You no longer need the `xIsNext` state declaration or the calls to `setXIsNext`. Now, there's no chance for `xIsNext` to get out of sync with `currentMove`, even if you make a mistake while coding the components.
 
-### Wrapping up {/*wrapping-up*/}
+### Lopetus {/*wrapping-up*/}
 
 Congratulations! You've created a tic-tac-toe game that:
 

From 14b2002da8621080685e32bea9f71f4618b444bf Mon Sep 17 00:00:00 2001
From: Miro Rauhala <4082806+mirorauhala@users.noreply.github.com>
Date: Wed, 30 Aug 2023 20:20:05 +0300
Subject: [PATCH 03/34] Translate 'What are you building?'

---
 src/content/learn/tutorial-tic-tac-toe.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md
index 757c7c306..afba17f49 100644
--- a/src/content/learn/tutorial-tic-tac-toe.md
+++ b/src/content/learn/tutorial-tic-tac-toe.md
@@ -23,9 +23,9 @@ Tämä opas on jaettu useaan osaan:
 
 ### Mitä olet rakentamassa? {/*what-are-you-building*/}
 
-In this tutorial, you'll build an interactive tic-tac-toe game with React.
+Tässä oppaassa tulet rakentamaan interaktiivisen ristinolla-pelin Reactilla.
 
-You can see what it will look like when you're finished here:
+Näet alla miltä se tulee lopulta näyttämään kun saat sen valmiiksi:
 
 <Sandpack>
 
@@ -194,11 +194,11 @@ body {
 
 </Sandpack>
 
-If the code doesn't make sense to you yet, or if you are unfamiliar with the code's syntax, don't worry! The goal of this tutorial is to help you understand React and its syntax.
+Jos et saa selvää koodista vielä taikka koodin syntaksi ei ole tuttua, älä huoli! Tämän oppaan tavoite on auttaa sinua ymmärtämään Reactia ja sen syntaksia.
 
-We recommend that you check out the tic-tac-toe game above before continuing with the tutorial. One of the features that you'll notice is that there is a numbered list to the right of the game's board. This list gives you a history of all of the moves that have occurred in the game, and it is updated as the game progresses.
+Suosittelemme, että kokeilet peliä ennen kuin jatkat oppaan kanssa. Yksi pelin ominaisuuksista on, että pelilaudan oikealla puolella on numeroitu lista. Tämä lista näyttää pelin kaikki siirrot ja päivittyy pelin edetessä.
 
-Once you've played around with the finished tic-tac-toe game, keep scrolling. You'll start with a simpler template in this tutorial. Our next step is to set you up so that you can start building the game.
+Kun olet pelannut peliä, jatka oppaan kanssa. Tulet aloittamaan yksinkertaisemmasta pohjasta. Seuraava askel on asentaa ympäristö, jotta voit aloittaa pelin rakentamisen.
 
 ## Oppaan asennusvaihe {/*setup-for-the-tutorial*/}
 

From 52a38642132dfa0bdfa03533bb51e6e204dd737d Mon Sep 17 00:00:00 2001
From: Miro Rauhala <4082806+mirorauhala@users.noreply.github.com>
Date: Wed, 30 Aug 2023 20:31:36 +0300
Subject: [PATCH 04/34] Translate 'Setup for the tutorial'

---
 src/content/learn/tutorial-tic-tac-toe.md | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md
index afba17f49..145ee68b0 100644
--- a/src/content/learn/tutorial-tic-tac-toe.md
+++ b/src/content/learn/tutorial-tic-tac-toe.md
@@ -202,7 +202,7 @@ Kun olet pelannut peliä, jatka oppaan kanssa. Tulet aloittamaan yksinkertaisemm
 
 ## Oppaan asennusvaihe {/*setup-for-the-tutorial*/}
 
-In the live code editor below, click **Fork** in the top-right corner to open the editor in a new tab using the website CodeSandbox. CodeSandbox lets you write code in your browser and preview how your users will see the app you've created. The new tab should display an empty square and the starter code for this tutorial.
+Alla olevassa koodieditorissa, paina **Forkkaa* oikeassa yläreunassa avataksesi editorin uuteen välilehteen käyttäen CodeSandboxia. CodeSandbox antaa sinun kirjoittaa koodia selaimessasi ja esikatsella miten käyttäjäsi näkevät luomasi sovelluksen. Uuden välilehden tulisi näyttää tyhjä ruutu ja tämän oppaan aloituskoodi.
 
 <Sandpack>
 
@@ -263,13 +263,15 @@ body {
 
 You can also follow this tutorial using your local development environment. To do this, you need to:
 
-1. Install [Node.js](https://nodejs.org/en/)
-1. In the CodeSandbox tab you opened earlier, press the top-left corner button to open the menu, and then choose **File > Export to ZIP** in that menu to download an archive of the files locally
-1. Unzip the archive, then open a terminal and `cd` to the directory you unzipped
-1. Install the dependencies with `npm install`
-1. Run `npm start` to start a local server and follow the prompts to view the code running in a browser
+Voit myös seurata tätä opasta paikallisessa kehitysympäristössä. Tämä vaatii:
 
-If you get stuck, don't let this stop you! Follow along online instead and try a local setup again later.
+1. Asenna [Node.js](https://nodejs.org/en/)
+1. Aikaisemmin avatussa CodeSandbox -välilehdessä, paina vasemmassa yläreunassa olevaa painiketta ja valitse **File > Export to ZIP** ladataksesi arkiston tiedostoista.
+1. Pura arkisto, ja avaa sitten terminaali ja siirry `cd`:llä purettuun hakemistoon
+1. Asenna riippuvuudet `npm install` komennolla
+1. Suorita `npm start` käynnistääksesi paikallisen palvelimen ja seuraa kehotuksia nähdäksesi koodin selaimessa
+
+Jos jäät jumiin, älä anna tämän estää! Seuraa opasta verkossa ja kokeile paikallista asennusta myöhemmin uudelleen.
 
 </Note>
 

From c009e9773c7fa1eadeb4c80cb847e51a9777f90e Mon Sep 17 00:00:00 2001
From: Miro Rauhala <4082806+mirorauhala@users.noreply.github.com>
Date: Wed, 30 Aug 2023 20:53:13 +0300
Subject: [PATCH 05/34] Translate 'Overview'

---
 src/content/learn/tutorial-tic-tac-toe.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md
index 145ee68b0..233da0424 100644
--- a/src/content/learn/tutorial-tic-tac-toe.md
+++ b/src/content/learn/tutorial-tic-tac-toe.md
@@ -277,7 +277,7 @@ Jos jäät jumiin, älä anna tämän estää! Seuraa opasta verkossa ja kokeile
 
 ## Yleiskatsaus {/*overview*/}
 
-Now that you're set up, let's get an overview of React!
+Nyt kun olet valmis, annetaan yleiskatsaus Reactista!
 
 ### Aloituskoodin tarkastelu {/*inspecting-the-starter-code*/}
 

From 6b127dcd0737e7180d696fde41efe07c97919ece Mon Sep 17 00:00:00 2001
From: Miro Rauhala <4082806+mirorauhala@users.noreply.github.com>
Date: Wed, 30 Aug 2023 21:09:28 +0300
Subject: [PATCH 06/34] Translate 'Inspecing the starter code'

---
 src/content/learn/tutorial-tic-tac-toe.md | 38 +++++++++++------------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md
index 233da0424..f6d7287d9 100644
--- a/src/content/learn/tutorial-tic-tac-toe.md
+++ b/src/content/learn/tutorial-tic-tac-toe.md
@@ -281,15 +281,15 @@ Nyt kun olet valmis, annetaan yleiskatsaus Reactista!
 
 ### Aloituskoodin tarkastelu {/*inspecting-the-starter-code*/}
 
-In CodeSandbox you'll see three main sections:
+CodeSandboxissa näet kolme eri osiota:
 
-![CodeSandbox with starter code](../images/tutorial/react-starter-code-codesandbox.png)
+![CodeSandbox aloituskoodilla](../images/tutorial/react-starter-code-codesandbox.png)
 
-1. The _Files_ section with a list of files like `App.js`, `index.js`, `styles.css` and a folder called `public`
-1. The _code editor_ where you'll see the source code of your selected file
-1. The _browser_ section where you'll see how the code you've written will be displayed
+1. _Files_ osio, jossa on listaus tiedostoista kuten `App.js`, `index.js`, `styles.css` ja hakemisto nimeltään `public`
+1. _Koodieditori_, jossa näet valitun tiedoston lähdekoodin
+1. _Selain_, jossa näet miltä kirjoittamasi koodi näyttää
 
-The `App.js` file should be selected in the _Files_ section. The contents of that file in the _code editor_ should be:
+`App.js` tiedoston tulisi olla valittuna _Files_ osiossa. Tiedoston sisältö _koodieditorissa_ tulisi olla seuraava:
 
 ```jsx
 export default function Square() {
@@ -297,15 +297,15 @@ export default function Square() {
 }
 ```
 
-The _browser_ section should be displaying a square with a X in it like this:
+_Selaimen_ tulisi näyttää neliö, jossa on X:
 
-![x-filled square](../images/tutorial/x-filled-square.png)
+![Neliö, jossa on X](../images/tutorial/x-filled-square.png)
 
-Now let's have a look at the files in the starter code.
+Katsotaan nyt aloituskoodin tiedostoja.
 
 #### `App.js` {/*appjs*/}
 
-The code in `App.js` creates a _component_. In React, a component is a piece of reusable code that represents a part of a user interface. Components are used to render, manage, and update the UI elements in your application. Let's look at the component line by line to see what's going on:
+Koodi `App.js` tiedostossa luo _komponentin_. Reactissa komponentti on pala uudelleenkäytettävää koodia, joka edustaa palan käyttöliittymää. Komponentteja käytetään renderöimään, hallitsemaan ja päivittämään sovelluksesi UI elementtejä. Katsotaan komponenttia rivi riviltä nähdäksemme mitä tapahtuu:
 
 ```js {1}
 export default function Square() {
@@ -313,7 +313,7 @@ export default function Square() {
 }
 ```
 
-The first line defines a function called `Square`. The `export` JavaScript keyword makes this function accessible outside of this file. The `default` keyword tells other files using your code that it's the main function in your file.
+Ensimmäinen rivi määrittelee funktion nimeltään `Square`. `export` -JavaScript avainsana tekee funktion saavutettavaksi tämän tiedoston ulkopuolelle. `default` avainsana kertoo muille tiedostoille, että tämä on pääfunktio tiedostossasi.
 
 ```js {2}
 export default function Square() {
@@ -321,15 +321,15 @@ export default function Square() {
 }
 ```
 
-The second line returns a button. The `return` JavaScript keyword means whatever comes after is returned as a value to the caller of the function. `<button>` is a *JSX element*. A JSX element is a combination of JavaScript code and HTML tags that describes what you'd like to display. `className="square"` is a button property or *prop* that tells CSS how to style the button. `X` is the text displayed inside of the button and `</button>` closes the JSX element to indicate that any following content shouldn't be placed inside the button.
+Seuraava koodirivi palauttaa painonapin. `return` -JavaScript avainsanan tarkoittaa, mitä ikinä sen jälkeen tulee, palautetaan se arvo funktion kutsujalle. `<button>` on *JSX elementti*. JSX elementti on yhdistelmä JavaScript koodia ja HTML tageja, jotka kuvaavat mitä haluaisit näyttää. `className="square"` on painikkeen ominaisuus taikka *propsi*, joka ekertoo CSS:lle miten painike tulisi tyylittää. `X` on teksti, joka näytetään painikkeen sisällä, ja `</button>` sulkee JSX elementin osoittaen, että mitään seuraavaa sisältöä ei tulisi sijoittaa painikkeen sisälle.
 
 #### `styles.css` {/*stylescss*/}
 
-Click on the file labeled `styles.css` in the _Files_ section of CodeSandbox. This file defines the styles for your React app. The first two _CSS selectors_ (`*` and `body`) define the style of large parts of your app while the `.square` selector defines the style of any component where the `className` property is set to `square`. In your code, that would match the button from your Square component in the `App.js` file.
+Paina tiedostosta nimeltään `styles.css` CodeSandboxin _Files_ osiossa. Tämä tiedosto määrittelee React sovelluksesi tyylin. Ensimmäiset kaksi _CSS selektoria_ (`*` ja `body`) määrittävät suuren osan sovelluksestasi tyyleistä, kun taas `.square` selektori määrittää minkä tahansa komponentin tyylin, jossa `className` ominaisuus on asetettu `square` arvoon. Koodissasi tämä vastaa painiketta `Square` komponentissa `App.js` tiedostossa.
 
 #### `index.js` {/*indexjs*/}
 
-Click on the file labeled `index.js` in the _Files_ section of CodeSandbox. You won't be editing this file during the tutorial but it is the bridge between the component you created in the `App.js` file and the web browser.
+Paina tiedostosta nimeltään `index.js` CodeSandboxin _Files_ osiossa. Et tule muokkaamaan tätä tiedostoa oppaan aikana, mutta se on silta `App.js` tiedostossa luomasi komponentin ja selaimen välillä.
 
 ```jsx
 import { StrictMode } from 'react';
@@ -339,14 +339,14 @@ import './styles.css';
 import App from './App';
 ```
 
-Lines 1-5 brings all the necessary pieces together: 
+Rivit 1-5 tuovat kaikki tarvittavat palaset yhteen:
 
 * React
-* React's library to talk to web browsers (React DOM)
-* the styles for your components
-* the component you created in `App.js`.
+* Reactin kirjasto, jolla se juttelee selaimen kanssa (React DOM)
+* komponenttiesi tyylit
+* luomasi komponentti `App.js` tiedostossa.
 
-The remainder of the file brings all the pieces together and injects the final product into `index.html` in the `public` folder.
+Loput tiedostosta tuo kaikki palaset yhteen ja palauttaa lopputuotteen `index.html` tiedostoon `public` hakemistossa.
 
 ### Pelilaudan rakentaminen {/*building-the-board*/}
 

From ce1b7170fa56d4a8b33acdec9eb13f7dabff9fe2 Mon Sep 17 00:00:00 2001
From: Miro Rauhala <4082806+mirorauhala@users.noreply.github.com>
Date: Wed, 30 Aug 2023 21:25:41 +0300
Subject: [PATCH 07/34] Translate 'Building the Board'

---
 src/content/learn/tutorial-tic-tac-toe.md | 30 +++++++++++------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md
index f6d7287d9..b38729895 100644
--- a/src/content/learn/tutorial-tic-tac-toe.md
+++ b/src/content/learn/tutorial-tic-tac-toe.md
@@ -350,9 +350,9 @@ Loput tiedostosta tuo kaikki palaset yhteen ja palauttaa lopputuotteen `index.ht
 
 ### Pelilaudan rakentaminen {/*building-the-board*/}
 
-Let's get back to `App.js`. This is where you'll spend the rest of the tutorial.
+Palataan takaisin `App.js` tiedostoon. Tämä on missä tulet viettämään lopun oppaan ajasta.
 
-Currently the board is only a single square, but you need nine! If you just try and copy paste your square to make two squares like this:
+Nykyisillään pelilauta on vain yksi neliö, mutta tarvitset yhdeksän! Voit yrittää vain kopioida ja liittää neliösi tehdäksesi kaksi neliötä näin:
 
 ```js {2}
 export default function Square() {
@@ -360,7 +360,7 @@ export default function Square() {
 }
 ```
 
-You'll get this error:
+Saat tämän virheen:
 
 <ConsoleBlock level="error">
 
@@ -368,7 +368,7 @@ You'll get this error:
 
 </ConsoleBlock>
 
-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:
+React komponenttien täytyy palauttaa yksi JSX elementti, ei useampia vierekkäisiä JSX elementtejä kun kaksi painonappia. Korjataksesi tämän käytä *fragmenttejä* (`<>` ja `</>`) käärimään useampia vierekkäisiä JSX elementtejä näin:
 
 ```js {3-6}
 export default function Square() {
@@ -381,17 +381,17 @@ export default function Square() {
 }
 ```
 
-Now you should see:
+Nyt näet:
 
-![two x-filled squares](../images/tutorial/two-x-filled-squares.png)
+![kaksi x:llä täytettyä neliötä](../images/tutorial/two-x-filled-squares.png)
 
-Great! Now you just need to copy-paste a few times to add nine squares and...
+Hyvä! Nyt sinun tulee kopioida ja littää muutaman kerran saadaksesi yhdeksän neliötä ja sitten....
 
-![nine x-filled squares in a line](../images/tutorial/nine-x-filled-squares.png)
+![yhdeksän x:llä täyettyä neliötä rivissä](../images/tutorial/nine-x-filled-squares.png)
 
-Oh no! The squares are all in a single line, not in a grid like you need for our board. To fix this you'll need to group your squares into rows with `div`s and add some CSS classes. While you're at it, you'll give each square a number to make sure you know where each square is displayed.
+Voi ei! Neliöt ovat kaikki yhdessä rivissä eikä ruudukossa kuten tarvitset sen pelilaudalla. Korjataksesi tämän sinun tulee ryhmitellä neliöt riveihin `div` elementeillä ja lisätä muutama CSS luokka. Samalla kun teet tämän, annat jokaiselle neliölle numeron varmistaaksesi, että tiedät missä jokainen neliö näytetään.
 
-In the `App.js` file, update the `Square` component to look like this:
+`App.js` tiedostossa, päivitä `Square` komponentti näyttämään tältä:
 
 ```js {3-19}
 export default function Square() {
@@ -417,11 +417,11 @@ export default function Square() {
 }
 ```
 
-The CSS defined in `styles.css` styles the divs with the `className` of `board-row`. Now that you've grouped your components into rows with the styled `div`s you have your tic-tac-toe board:
+`styles.css` tiedostossa määritelty CSS tyylittää divit `className`:n `board-row` arvolla. Nyt kun olet ryhmitellyt komponenttisi riveihin tyylitetyillä `div` elementeillä, sinulla on ristinolla-pelilauta:
 
-![tic-tac-toe board filled with numbers 1 through 9](../images/tutorial/number-filled-board.png)
+![ristinolla-pelilauta numeroitu yhdestä yhdeksään](../images/tutorial/number-filled-board.png)
 
-But you now have a problem. Your component named `Square`, really isn't a square anymore. Let's fix that by changing the name to `Board`:
+Mutta nyt sinulla on ongelma. Komponenttisi `Square` ei enää ole neliö. Korjataksesi tämän, muuta nimi `Square` komponentille `Board`:iksi:
 
 ```js {1}
 export default function Board() {
@@ -429,7 +429,7 @@ export default function Board() {
 }
 ```
 
-At this point your code should look something like this:
+Tässä kohtaa, koodisi tuli näyttää tämänkaltaiselta:
 
 <Sandpack>
 
@@ -506,7 +506,7 @@ body {
 
 <Note>
 
-Psssst... That's a lot to type! It's okay to copy and paste code from this page. However, if you're up for a little challenge, we recommend only copying code that you've manually typed at least once yourself.
+Pst... Tuossa on aika paljon kirjoitettavaa! On ihan ok kopioida ja liittää koodia tältä sivulta. Jos kuitenkin haluat haastetta, suosittelemme kopioida vain koodia, jonka olet kirjoittanut ainakin kerran itse.
 
 </Note>
 

From aa7b7c6bc9ebd2641982381b6d198441f902d6fb Mon Sep 17 00:00:00 2001
From: Miro Rauhala <4082806+mirorauhala@users.noreply.github.com>
Date: Wed, 30 Aug 2023 21:36:51 +0300
Subject: [PATCH 08/34] Translate 'Passing data through props'

---
 src/content/learn/tutorial-tic-tac-toe.md | 38 +++++++++++------------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md
index b38729895..0e46b3f4c 100644
--- a/src/content/learn/tutorial-tic-tac-toe.md
+++ b/src/content/learn/tutorial-tic-tac-toe.md
@@ -512,9 +512,9 @@ Pst... Tuossa on aika paljon kirjoitettavaa! On ihan ok kopioida ja liittää ko
 
 ### Datan välittäminen propseilla {/*passing-data-through-props*/}
 
-Next, you'll want to change the value of a square from empty to "X" when the user clicks on the square. With how you've built the board so far you would need to copy-paste the code that updates the square nine times (once for each square you have)! Instead of copy-pasting, React's component architecture allows you to create a reusable component to avoid messy, duplicated code.
+Seuraavaksi haluat muuttaa neliön arvon tyhjästä X:ksi kun käyttäjä painaa neliötä. Tällä hetkellä sinun täytyisi kopioida ja liittää koodi, joka päivittää neliön yhdeksän kertaa (kerran jokaiselle neliölle)! Sen sijaan, että kopioisit ja liittäisit, Reactin komponenttiarkkitehtuuri antaa sinun luoda uudelleenkäytettävän komponentin välttääksesi sotkuisen, toistuvan koodin.
 
-First, you are going to copy the line defining your first square (`<button className="square">1</button>`) from your `Board` component into a new `Square` component:
+Ensiksi, kopioit rivin, joka määrittelee ensimmäisen neliösi (`<button className="square">1</button>`) `Board` komponentistasi uuteen `Square` komponenttiin:
 
 ```js {1-3}
 function Square() {
@@ -526,7 +526,7 @@ export default function Board() {
 }
 ```
 
-Then you'll update the Board component to render that `Square` component using JSX syntax:
+Sitten päivität `Board` komponentin renderöimään sen `Square` komponentin käyttäen JSX syntaksia:
 
 ```js {5-19}
 // ...
@@ -553,15 +553,15 @@ export default function Board() {
 }
 ```
 
-Note how unlike the browser `div`s, your own components `Board` and `Square` must start with a capital letter. 
+Huomaa miten toisin kuin selainten `div`:it, omat komponenttisi `Board` ja `Square` täytyy alkaa isolla kirjaimella.
 
-Let's take a look:
+Katsotaanpa:
 
-![one-filled board](../images/tutorial/board-filled-with-ones.png)
+![pelilauta täytetty ykkösillä](../images/tutorial/board-filled-with-ones.png)
 
-Oh no! You lost the numbered squares you had before. Now each square says "1". To fix this, you will use *props* to pass the value each square should have from the parent component (`Board`) to its child (`Square`).
+Voi ei! Menetit numeroidut neliöt, jotka sinulla oli aiemmin. Nyt jokaisessa neliössä lukee "1". Korjataksesi tämän, käytä *propseja* välittääksesi arvon, jonka jokaisen neliön tulisi saada vanhemmalta komponentilta (`Board`) sen alakomponentille (`Square`).
 
-Update the `Square` component to read the `value` prop that you'll pass from the `Board`:
+Päivitä `Square` komponentti lukemaan `value` propsi, jonka välität `Board` komponentilta:
 
 ```js {1}
 function Square({ value }) {
@@ -569,9 +569,9 @@ function Square({ value }) {
 }
 ```
 
-`function Square({ value })` indicates the Square component can be passed a prop called `value`.
+`function Square({ value })` kertoo, että `Square` komponentille voidaan välittää `value` niminen propsi.
 
-Now you want to display that `value` instead of `1` inside every square. Try doing it like this:
+Nyt haluat näyttää `value` arvon `1`:n sijaan jokaisessa neliössä. Kokeile tehdä se näin:
 
 ```js {2}
 function Square({ value }) {
@@ -579,11 +579,11 @@ function Square({ value }) {
 }
 ```
 
-Oops, this is not what you wanted:
+Oho, tämä ei ollut mitä halusit:
 
-![value-filled board](../images/tutorial/board-filled-with-value.png)
+![pelilauta täytetty value tekstillä](../images/tutorial/board-filled-with-value.png)
 
-You wanted to render the JavaScript variable called `value` from your component, not the word "value". To "escape into JavaScript" from JSX, you need curly braces. Add curly braces around `value` in JSX like so:
+Halusit renderöidä JavaScript muuttujan nimeltään `value` komponentistasi, et sanan "value". Päästäksesi "takaisin JavaScriptiin" JSX:stä, tarvitset aaltosulkeet. Lisää aaltosulkeet `value`:n ympärille JSX:ssä näin:
 
 ```js {2}
 function Square({ value }) {
@@ -591,11 +591,11 @@ function Square({ value }) {
 }
 ```
 
-For now, you should see an empty board:
+Toistaiseksi, sinun tulisi nähdä tyhjä pelilauta:
 
-![empty board](../images/tutorial/empty-board.png)
+![tyhjä pelilauta](../images/tutorial/empty-board.png)
 
-This is because the `Board` component hasn't passed the `value` prop to each `Square` component it renders yet. To fix it you'll add the `value` prop to each `Square` component rendered by the `Board` component:
+Näin tapahtuu, koska `Board` komponentti ei ole välittänyt `value` propseja jokaiselle `Square` komponentille, jonka se renderöi. Korjataksesi tämän, lisää `value` propsi jokaiselle `Square` komponentille, jonka `Board` komponentti renderöi:
 
 ```js {5-7,10-12,15-17}
 export default function Board() {
@@ -621,11 +621,11 @@ export default function Board() {
 }
 ```
 
-Now you should see a grid of numbers again:
+Nyt sinun tulisi nähdä numeroitu ruudukko taas:
 
-![tic-tac-toe board filled with numbers 1 through 9](../images/tutorial/number-filled-board.png)
+![ristinolla-pelilauta täytetty yhdestä yhdeksään](../images/tutorial/number-filled-board.png)
 
-Your updated code should look like this:
+Päivitetyn koodisi tulisi näyttää tämänkaltaiselta:
 
 <Sandpack>
 

From 536c0d92d76d15199b5b506944ffb2456c93cd06 Mon Sep 17 00:00:00 2001
From: Miro Rauhala <4082806+mirorauhala@users.noreply.github.com>
Date: Thu, 14 Sep 2023 20:00:00 +0300
Subject: [PATCH 09/34] Translate 'Making an interactive component'

---
 src/content/learn/tutorial-tic-tac-toe.md | 26 +++++++++++------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md
index 0e46b3f4c..cc3e6be15 100644
--- a/src/content/learn/tutorial-tic-tac-toe.md
+++ b/src/content/learn/tutorial-tic-tac-toe.md
@@ -706,7 +706,7 @@ body {
 
 ### Interaktiivisen komponentin luominen {/*making-an-interactive-component*/}
 
-Let's fill the `Square` component with an `X` when you click it. Declare a function called `handleClick` inside of the `Square`. Then, add `onClick` to the props of the button JSX element returned from the `Square`:
+Täytetään `Square` komponentti `X`:llä kun klikkaat sitä. Määritä funktio nimeltään `handleClick` `Square` komponentin sisällä. Sitten, lisää `onClick` prosi painonapin JSX elementtiin, joka palautetaan `Square` komponentista:
 
 ```js {2-4,9}
 function Square({ value }) {
@@ -725,19 +725,19 @@ function Square({ value }) {
 }
 ```
 
-If you click on a square now, you should see a log saying `"clicked!"` in the _Console_ tab at the bottom of the _Browser_ section in CodeSandbox. Clicking the square more than once will log `"clicked!"` again. Repeated console logs with the same message will not create more lines in the console. Instead, you will see an incrementing counter next to your first `"clicked!"` log.
+Jos painat neliöstä nyt, sinun tulisi nähdä loki, jossa lukee `"clicked!"` _Console_ välilehdellä _Browser_ osiossa CodeSandboxissa. Painamalla neliötä useammin kuin kerran, lokiin tulee uusi rivi, jossa lukee `"clicked!"`. Toistuvat lokit samalla viestillä eivät luo uusia rivejä lokiin. Sen sijaan, näet kasvavan laskurin ensimmäisen `"clicked!"` lokin vieressä.
 
 <Note>
 
-If you are following this tutorial using your local development environment, you need to open your browser's Console. For example, if you use the Chrome browser, you can view the Console with the keyboard shortcut **Shift + Ctrl + J** (on Windows/Linux) or **Option + ⌘ + J** (on macOS).
+Jos seuraat tätä opasta paikallisessa kehitysympäristössä, sinun tulee avata selaimen konsoli. Esimerkiksi, jos käytät Chrome selainta, voit avata konsolin näppäinyhdistelmällä **Shift + Ctrl + J** (Windows/Linux) tai **Option + ⌘ + J** (macOS).
 
 </Note>
 
-As a next step, you want the Square component to "remember" that it got clicked, and fill it with an "X" mark. To "remember" things, components use *state*.
+Seuraavaksi, haluat Square komponentin "muistavat", että sitä painettiin, ja täyttää sen "X" merkillä. Komponentit käyttävät *tilaa* muistaakseen asioita.
 
-React provides a special function called `useState` that you can call from your component to let it "remember" things. Let's store the current value of the `Square` in state, and change it when the `Square` is clicked.
+React tarjoaa erityisen funktion nimeltään `useState`, jota voit kutsua komponentistasi, jotta se "muistaa" asioita. Tallennetaan `Square` komponentin nykyinen arvo tilaan ja muutetaan sitä, kun `Square` painetaan.
 
-Import `useState` at the top of the file. Remove the `value` prop from the `Square` component. Instead, add a new line at the start of the `Square` that calls `useState`. Have it return a state variable called `value`:
+Importtaa `useState` tiedoston ylläosassa. Poista `value` propsi `Square` komponentista. Sen sijaan, lisää uusi rivi `Square` komponentin alkuun, joka kutsuu `useState`:a. Anna sen palauttaa tilamuuttuja nimeltään `value`:
 
 ```js {1,3,4}
 import { useState } from 'react';
@@ -749,9 +749,9 @@ function Square() {
     //...
 ```
 
-`value` stores the value and `setValue` is a function that can be used to change the value. The `null` passed to `useState` is used as the initial value for this state variable, so `value` here starts off equal to `null`.
+`value` pitää sisällään arvon ja `setValue` on funktio, jota voidaan käyttää muuttamaan arvoa. `null`, joka välitetään `useState`:lle, käytetään alkuperäisenä arvona tälle tilamuuttujalle, joten `value` on aluksi `null`.
 
-Since the `Square` component no longer accepts props anymore, you'll remove the `value` prop from all nine of the Square components created by the Board component:
+Koska `Square` komponentti ei enää hyväksy propseja, poistat `value` propin kaikista yhdeksästä `Square` komponentista, jotka `Board` komponentti luo:
 
 ```js {6-8,11-13,16-18}
 // ...
@@ -778,7 +778,7 @@ export default function Board() {
 }
 ```
 
-Now you'll change `Square` to display an "X" when clicked. Replace the `console.log("clicked!");` event handler with `setValue('X');`. Now your `Square` component looks like this:
+Nyt muutat `Square`:n näyttämään "X":n kun sitä painetaan. Korvaa `console.log("clicked!");` tapahtumankäsittelijä `setValue('X');`:lla. Nyt `Square` komponenttisi näyttää tältä:
 
 ```js {5}
 function Square() {
@@ -799,13 +799,13 @@ function Square() {
 }
 ```
 
-By calling this `set` function from an `onClick` handler, you're telling React to re-render that `Square` whenever its `<button>` is clicked. After the update, the `Square`'s `value` will be `'X'`, so you'll see the "X" on the game board. Click on any Square, and "X" should show up:
+Kutsumalla `set` funktiota `onClick` käsittelijästä, kerrot Reactille renderöidä `Square`:n uudelleen aina kun sen `<button>`:ia painetaan. Päivityksen jälkeen, `Square`n `value` on `'X'`, joten näet "X":n pelilaudalla. Paina mitä tahansa neliötä, ja "X":n tulisi näkyä:
 
-![adding xes to board](../images/tutorial/tictac-adding-x-s.gif)
+![x merkkien lisääminen pelilaudalle](../images/tutorial/tictac-adding-x-s.gif)
 
-Each Square has its own state: the `value` stored in each Square is completely independent of the others. When you call a `set` function in a component, React automatically updates the child components inside too.
+Jokaisella Squarella on sen oma tila: `value` joka on tallennettu jokaisessa Squaressa on täysin riippumaton muista. Kun kutsut `set` funktiota komponentissa, React päivittää automaattisesti myös alakomponentit.
 
-After you've made the above changes, your code will look like this:
+Kun olet tehnyt yllä olevat muutokset, koodisi tulisi näyttää tältä:
 
 <Sandpack>
 

From 1197b2e054663f4bc791dcef5d42235e1e8cfb00 Mon Sep 17 00:00:00 2001
From: Miro Rauhala <4082806+mirorauhala@users.noreply.github.com>
Date: Thu, 14 Sep 2023 20:03:04 +0300
Subject: [PATCH 10/34] Translate 'React Developer Tools'

---
 src/content/learn/tutorial-tic-tac-toe.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md
index cc3e6be15..752898a20 100644
--- a/src/content/learn/tutorial-tic-tac-toe.md
+++ b/src/content/learn/tutorial-tic-tac-toe.md
@@ -901,17 +901,17 @@ body {
 
 ### React kehitystyökalut {/*react-developer-tools*/}
 
-React DevTools let you check the props and the state of your React components. You can find the React DevTools tab at the bottom of the _browser_ section in CodeSandbox:
+React kehitystyökalujen avulla voit tarkastella React komponenttiesi propseja ja tilaa. React DevTools välilehti löytyy _browser_ osion alapuolelta CodeSandboxissa:
 
-![React DevTools in CodeSandbox](../images/tutorial/codesandbox-devtools.png)
+![React DevTools CodeSandboxissa](../images/tutorial/codesandbox-devtools.png)
 
-To inspect a particular component on the screen, use the button in the top left corner of React DevTools:
+Tarkastellaksesi tiettyä komponenttia ruudulla, käytä nappia React DevToolsin vasemmassa yläkulmassa:
 
-![Selecting components on the page with React DevTools](../images/tutorial/devtools-select.gif)
+![Komponentin valinta sivulla React DevToolsissa](../images/tutorial/devtools-select.gif)
 
 <Note>
 
-For local development, React DevTools is available as a [Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en), [Firefox](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/), and [Edge](https://microsoftedge.microsoft.com/addons/detail/react-developer-tools/gpphkfbcpidddadnkolkpfckpihlkkil) browser extension. Install it, and the *Components* tab will appear in your browser Developer Tools for sites using React.
+Paikallisessa kehityksessä, React DevTools on saatavilla [Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en), [Firefox](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/), ja [Edge](https://microsoftedge.microsoft.com/addons/detail/react-developer-tools/gpphkfbcpidddadnkolkpfckpihlkkil) selainlaajennuksena. Asenna se, ja *Components* välilehti ilmestyy selaimen kehitystyökaluihin sivuille, jotka käyttävät Reactia.
 
 </Note>
 

From bb7560476a7066de1c2702bd9d6993d5d4447c41 Mon Sep 17 00:00:00 2001
From: Miro Rauhala <4082806+mirorauhala@users.noreply.github.com>
Date: Thu, 14 Sep 2023 20:04:37 +0300
Subject: [PATCH 11/34] Translate 'Completing the game'

---
 src/content/learn/tutorial-tic-tac-toe.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md
index 752898a20..33045ec46 100644
--- a/src/content/learn/tutorial-tic-tac-toe.md
+++ b/src/content/learn/tutorial-tic-tac-toe.md
@@ -917,7 +917,7 @@ Paikallisessa kehityksessä, React DevTools on saatavilla [Chrome](https://chrom
 
 ## Pelin viimeistely {/*completing-the-game*/}
 
-By this point, you have all the basic building blocks for your tic-tac-toe game. To have a complete game, you now need to alternate placing "X"s and "O"s on the board, and you need a way to determine a winner.
+Tähän mennessä, sinulla on kaikki peruspalikat ristinolla-peliisi. Saadaksesi täydellisen pelin, sinun täytyy nyt vuorotella "X":n ja "O":n laittamista pelilaudalle, ja sinun täytyy keksiä tapa määrittää voittaja.
 
 ### Tilan nostaminen ylös {/*lifting-state-up*/}
 

From 17f3980c2931dcdf218d3dc64291deb0ae454dee Mon Sep 17 00:00:00 2001
From: Miro Rauhala <4082806+mirorauhala@users.noreply.github.com>
Date: Thu, 14 Sep 2023 20:32:00 +0300
Subject: [PATCH 12/34] Translate 'Lifting state up'

---
 src/content/learn/tutorial-tic-tac-toe.md | 80 +++++++++++------------
 1 file changed, 40 insertions(+), 40 deletions(-)

diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md
index 33045ec46..d77f135ac 100644
--- a/src/content/learn/tutorial-tic-tac-toe.md
+++ b/src/content/learn/tutorial-tic-tac-toe.md
@@ -921,15 +921,15 @@ Tähän mennessä, sinulla on kaikki peruspalikat ristinolla-peliisi. Saadaksesi
 
 ### Tilan nostaminen ylös {/*lifting-state-up*/}
 
-Currently, each `Square` component maintains a part of the game's state. To check for a winner in a tic-tac-toe game, the `Board` would need to somehow know the state of each of the 9 `Square` components.
+Tällä hetkellä, jokainen `Square` komponentti ylläpitää osaa pelin tilasta. Voittaaksesi ristinolla-pelin, `Board` komponentin täytyy jotenkin tietää jokaisen yhdeksän `Square` komponentin tila.
 
-How would you approach that? At first, you might guess that the `Board` needs to "ask" each `Square` for that `Square`'s state. Although this approach is technically possible in React, we discourage it because the code becomes difficult to understand, susceptible to bugs, and hard to refactor. Instead, the best approach is to store the game's state in the parent `Board` component instead of in each `Square`. The `Board` component can tell each `Square` what to display by passing a prop, like you did when you passed a number to each Square.
+Miten lähestyisit tätä? Aluksi, kuten saatat arvata, `Board`:n täytyy "kysyä" jokaiselta `Square`:lta sen tila. Vaikka tämä lähestymistapa on teknisesti mahdollista Reactissa, emme suosittele sitä, koska koodista tulee vaikeaa ymmärtää, altistaen se bugeille, ja vaikea refaktoroida. Sen sijaan, paras lähestymistapa on tallentaa pelin tila ylemmässä `Board` komponentissa jokaisen `Square` komponentin sijaan. `Board` komponentti voi kertoa jokaiselle `Square` komponentille mitä näyttää välittämällä propseja, kuten teit kun välitit numeron jokaiselle `Square` komponentille.
 
-**To collect data from multiple children, or to have two child components communicate with each other, declare the shared state in their parent component instead. The parent component can pass that state back down to the children via props. This keeps the child components in sync with each other and with their parent.**
+**Kerätäksesi dataa useammista alakomponenteista, tai saadaksesi kahden alakomponentin kommunikoimaan toistensa kanssa, määritä jaettu tila niitä ylemmässä komponentissa. Ylempi komponentti voi välittää tilan takaisin alakomponenteilleen propseina. Tämä pitää alakomponentit synkronoituina toistensa ja yläkomponentin kanssa.**
 
-Lifting state into a parent component is common when React components are refactored.
+Tilan nostaminen yläkomponenttiin on yleistä kun React komponentteja refaktoroidaan.
 
-Let's take this opportunity to try it out. Edit the `Board` component so that it declares a state variable named `squares` that defaults to an array of 9 nulls corresponding to the 9 squares:
+Otetaan tilaisuus kokeilla tätä. Muokkaa `Board` komponenttia siten, että se määrittelee tilamuuttujan nimeltään `squares`, joka oletuksena on taulukko, jossa on yhdeksän `null` arvoa vastaten yhdeksää neliötä:
 
 ```js {3}
 // ...
@@ -941,13 +941,13 @@ export default function Board() {
 }
 ```
 
-`Array(9).fill(null)` creates an array with nine elements and sets each of them to `null`. The `useState()` call around it declares a `squares` state variable that's initially set to that array. Each entry in the array corresponds to the value of a square. When you fill the board in later, the `squares` array will look like this:
+`Array(9).fill(null)` luo taulukon yhdeksällä kohdalla ja asettaa jokaisen niistä `null` arvoon. `useState()` kutsu sen ympärillä määrittelee `squares` tilamuuttujan, jonka arvo on aluksi asetettu tuohon taulukkoon. Jokainen taulukon kohta vastaa neliön arvoa. Kun täytät pelilaudan myöhemmin, `squares` taulukko näyttää tältä:
 
 ```jsx
 ['O', null, 'X', 'X', 'X', 'O', 'O', null, null]
 ```
 
-Now your `Board` component needs to pass the `value` prop down to each `Square` that it renders:
+Nyt `Board` komponenttisi täytyy välittää `value` propsi jokaiselle `Square` komponentille, jonka se renderöi:
 
 ```js {6-8,11-13,16-18}
 export default function Board() {
@@ -974,7 +974,7 @@ export default function Board() {
 }
 ```
 
-Next, you'll edit the `Square` component to receive the `value` prop from the Board component. This will require removing the Square component's own stateful tracking of `value` and the button's `onClick` prop:
+Seuraavakasi, muokkaa `Square` komponentti vastaanottamaan `value` propsi Board komponentilta. Tämä vaatii `Square` komponentin oman tilamuuttujan `value` ja painonapin `onClick` propsin poistamisen:
 
 ```js {1,2}
 function Square({value}) {
@@ -982,11 +982,11 @@ function Square({value}) {
 }
 ```
 
-At this point you should see an empty tic-tac-toe board:
+Tässä kohtaa sinun tulisi nähdä tyhjä ristinolla-pelilauta:
 
-![empty board](../images/tutorial/empty-board.png)
+![tyhjä pelilauta](../images/tutorial/empty-board.png)
 
-And your code should look like this:
+Ja koodisi tulisi näyttää tältä:
 
 <Sandpack>
 
@@ -1068,11 +1068,11 @@ body {
 
 </Sandpack>
 
-Each Square will now receive a `value` prop that will either be `'X'`, `'O'`, or `null` for empty squares.
+Jokainen Square saa nyt `value` propsin, joka on joko `'X'`, `'O'`, tai `null` tyhjille neliöille.
 
-Next, you need to change what happens when a `Square` is clicked. The `Board` component now maintains which squares are filled. You'll need to create a way for the `Square` to update the `Board`'s state. Since state is private to a component that defines it, you cannot update the `Board`'s state directly from `Square`.
+Seuraavaksi, sinun täytyy muuttaa mitä tapahtuu kun `Square`:a klikataan. `Board` komponentti nyt ylläpitää mitkä neliöt ovat täytettyjä. Sinun täytyy luoda tapa `Square`:lle päivittää `Board`:n tila. Koska tila on yksityistä komponentille, joka sen määrittelee, et voi päivittää `Board`:n tilaa suoraan `Square`:sta.
 
-Instead, you'll pass down a function from the `Board` component to the `Square` component, and you'll have `Square` call that function when a square is clicked. You'll start with the function that the `Square` component will call when it is clicked. You'll call that function `onSquareClick`:
+Sen sijaan, välität funktion `Board` komponentista `Square` komponentille, ja kutsut sitä `Square`:sta kun neliötä painetaan. Aloitat funktiosta, jota `Square` komponentti kutsuu kun sitä painetaan. Kutsut sitä `onSquareClick`:ssa:
 
 ```js {3}
 function Square({ value }) {
@@ -1084,7 +1084,7 @@ function Square({ value }) {
 }
 ```
 
-Next, you'll add the `onSquareClick` function to the `Square` component's props:
+Seuraavaksi, lisäät `onSquareClick` funktion `Square` komponentin propseihin:
 
 ```js {1}
 function Square({ value, onSquareClick }) {
@@ -1096,7 +1096,7 @@ function Square({ value, onSquareClick }) {
 }
 ```
 
-Now you'll connect the `onSquareClick` prop to a function in the `Board` component that you'll name `handleClick`. To connect `onSquareClick` to `handleClick` you'll pass a function to the `onSquareClick` prop of the first `Square` component: 
+Nyt yhdistät `onSquareClick` propsin `Board` komponentin funktioon, jonka nimeät `handleClick`. Yhdistääksesi `onSquareClick` `handleClick`:iin, välität funktion `onSquareClick` propsin ensimmäiselle `Square` komponentille:
 
 ```js {7}
 export default function Board() {
@@ -1111,7 +1111,7 @@ export default function Board() {
 }
 ```
 
-Lastly, you will define the `handleClick` function inside the Board component to update the `squares` array holding your board's state:
+Lopuksi, määrittelet `handleClick` funktion Board komponentin sisällä päivittämään `squares` taulukon ylläpitämään pelilaudan tilaa:
 
 ```js {4-8}
 export default function Board() {
@@ -1129,17 +1129,17 @@ export default function Board() {
 }
 ```
 
-The `handleClick` function creates a copy of the `squares` array (`nextSquares`) with the JavaScript `slice()` Array method. Then, `handleClick` updates the `nextSquares` array to add `X` to the first (`[0]` index) square.
+`handleClick` funktio luo kopion `squares` taulukosta (`nextSquares`) JavaScriptin `slice()` taulukkometodilla. Sitten, `handleClick` päivittää `nextSquares` taulukon lisäämällä `X`:n ensimmäiseen (`[0]` indeksi) neliöön.
 
-Calling the `setSquares` function lets React know the state of the component has changed. This will trigger a re-render of the components that use the `squares` state (`Board`) as well as its child components (the `Square` components that make up the board).
+Kutsumalla `setSquares` funktiota kerrot Reactille, että komponentin tila on muuttunut. Tämä käynnistää renderöinnin komponenteille, jotka käyttävät `squares` tilaa (`Board`) sekä sen alakomponenteille (`Square` komponentit, jotka muodostavat pelilaudan).
 
 <Note>
 
-JavaScript supports [closures](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures) which means an inner function (e.g. `handleClick`) has access to variables and functions defined in a outer function (e.g. `Board`). The `handleClick` function can read the `squares` state and call the `setSquares` method because they are both defined inside of the `Board` function.
+JavaScript tukee [closureja](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures), mikä tarkoittaa, että sisäinen funktio (esim. `handleClick`) pääsee käsiksi muuttujiin ja funktioihin, jotka on määritelty ulomman funktion sisällä (esim. `Board`). `handleClick` funktio voi lukea `squares` tilaa ja kutsua `setSquares` metodia, koska ne molemmat on määritelty `Board` funktion sisällä.
 
 </Note>
 
-Now you can add X's to the board...  but only to the upper left square. Your `handleClick` function is hardcoded to update the index for the upper left square (`0`). Let's update `handleClick` to be able to update any square. Add an argument `i` to the `handleClick` function that takes the index of the square to update:
+Nyt voit lisätä X:ät pelilaudalle... mutta vain ylävasempaan neliöön. `handleClick` funktiosi on kovakoodattu päivittämään ylävasemman neliön indeksiä (`0`). Päivitetään `handleClick` funktio päivittämään mitä tahansa neliötä. Lisää argumentti `i` `handleClick` funktioon, joka ottaa neliön indeksin, jota päivittää:
 
 ```js {4,6}
 export default function Board() {
@@ -1157,13 +1157,13 @@ export default function Board() {
 }
 ```
 
-Next, you will need to pass that `i` to `handleClick`. You could try to set the `onSquareClick` prop of square to be `handleClick(0)` directly in the JSX like this, but it won't work:
+Seuraavaksi, sinun täytyy välittää `i` `handleClick`:lle. Voit yrittää asettaa `onSquareClick` propin neliölle suoraan JSX:ssä `handleClick(0)` näin, mutta se ei toimi:
 
 ```jsx
 <Square value={squares[0]} onSquareClick={handleClick(0)} />
 ```
 
-Here is why this doesn't work. The `handleClick(0)` call will be a part of rendering the board component. Because `handleClick(0)` alters the state of the board component by calling `setSquares`, your entire board component will be re-rendered again. But this runs `handleClick(0)` again, leading to an infinite loop:
+Syy miksi tämä ei toimi on, `handleClick(0)` kustu on osa pelilaudan renderöintiä. Koska `handleClick(0)` muuttaa pelilaudan tilaa kutsumalla `setSquares`:ia, koko pelilauta renderöidään uudelleen. Mutta tämä ajaa `handleClick(0)` uudelleen, mikä johtaa loputtomaan silmukkaan:
 
 <ConsoleBlock level="error">
 
@@ -1171,13 +1171,13 @@ Too many re-renders. React limits the number of renders to prevent an infinite l
 
 </ConsoleBlock>
 
-Why didn't this problem happen earlier?
+Miksi tämä ongelma ei tapahtunut aiemmin?
 
-When you were passing `onSquareClick={handleClick}`, you were passing the `handleClick` function down as a prop. You were not calling it! But now you are *calling* that function right away--notice the parentheses in `handleClick(0)`--and that's why it runs too early. You don't *want* to call `handleClick` until the user clicks!
+Kun välitit `onSquareClick={handleClick}`, välitit `handleClick` funktion propseina. Et kutsunut sitä! Mutta nyt kutsut sitä heti--huomaa sulkeet `handleClick(0)`--ja siksi se ajetaan liian aikaisin. Et *halua* kutsua `handleClick` ennen kuin käyttäjä klikkaa!
 
-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.
+Voisit korjata tämän tekemällä funktion kuten `handleFirstSquareClick`, joka kutsuu `handleClick(0)`, funktion kuten `handleSecondSquareClick`, joka kutsuu `handleClick(1)`, ja niin edelleen. Välittäisit (et kutsuisi) näitä funktioita propseina kuten `onSquareClick={handleFirstSquareClick}`. Tämä korjaisi loputtoman silmukan.
 
-However, defining nine different functions and giving each of them a name is too verbose. Instead, let's do this:
+Yhdeksän eri funktion määritteleminen ja nimeäminen on liian raskasta. Sen sijaan tehdään näin:
 
 ```js {6}
 export default function Board() {
@@ -1191,9 +1191,9 @@ export default function Board() {
 }
 ```
 
-Notice the new `() =>` syntax. Here, `() => handleClick(0)` is an *arrow function,* which is a shorter way to define functions. When the square is clicked, the code after the `=>` "arrow" will run, calling `handleClick(0)`.
+Huomaa uusi `() =>` syntaksi. Tässä, `() => handleClick(0)` on *nuolifunktio*, joka on lyhyempi tapa määritellä funktioita. Kun neliötä painetaan, koodi `=>` "nuolen" jälkeen ajetaan, kutsuen `handleClick(0)`.
 
-Now you need to update the other eight squares to call `handleClick` from the arrow functions you pass. Make sure that the argument for each call of the `handleClick` corresponds to the index of the correct square:
+Nyt sinun tulee päivittää muut kahdeksan neliötä kutsumaan `handleClick` nuolifunktioista, jotka välität. Varmista, että argumentti jokaiselle `handleClick` kutsulle vastaa oikean neliön indeksiä:
 
 ```js {6-8,11-13,16-18}
 export default function Board() {
@@ -1220,13 +1220,13 @@ export default function Board() {
 };
 ```
 
-Now you can again add X's to any square on the board by clicking on them:
+Nyt voit taas lisätä X:ät mihin tahansa neliöön pelilaudalla painamalla niitä:
 
-![filling the board with X](../images/tutorial/tictac-adding-x-s.gif)
+![pelilaudan täyttäminen x:llä](../images/tutorial/tictac-adding-x-s.gif)
 
-But this time all the state management is handled by the `Board` component!
+Mutta tällä kertaa tilanhallinta on `Board` komponentin vastuulla!
 
-This is what your code should look like:
+Tämä on mitä koodisi tulisi näyttää:
 
 <Sandpack>
 
@@ -1319,19 +1319,19 @@ body {
 
 </Sandpack>
 
-Now that your state handling is in the `Board` component, the parent `Board` component passes props to the child `Square` components so that they can be displayed correctly. When clicking on a `Square`, the child `Square` component now asks the parent `Board` component to update the state of the board. When the `Board`'s state changes, both the `Board` component and every child `Square` re-renders automatically. Keeping the state of all squares in the `Board` component will allow it to determine the winner in the future.
+Nyt kun tilanhallintasi on `Board` komponentissa, yläkomponentti `Board` välittää propseja alakomponenteille `Square` komponenteille, jotta ne voidaan näyttää oikein. Kun neliötä painetaan, alakomponentti `Square` kysyy yläkomponentti `Board`:lta tilan päivittämistä pelilaudalla. Kun `Board`:n tila muuttuu, sekä `Board` komponentti että jokainen `Square` renderöidään uudelleen automaattisesti. Pitämällä kaikkien neliöiden tila `Board` komponentissa, se pystyy määrittämään voittajan tulevaisuudessa.
 
-Let's recap what happens when a user clicks the top left square on your board to add an `X` to it:
+Käydään läpi mitä tapahtuu kun käyttäjä painaa ylävasenta neliötä pelilaudalla lisätäkseen siihen `X`:n:
 
-1. Clicking on the upper left square runs the function that the `button` received as its `onClick` prop from the `Square`. The `Square` component received that function as its `onSquareClick` prop from the `Board`. The `Board` component defined that function directly in the JSX. It calls `handleClick` with an argument of `0`.
-1. `handleClick` uses the argument (`0`) to update the first element of the `squares` array from `null` to `X`.
-1. The `squares` state of the `Board` component was updated, so the `Board` and all of its children re-render. This causes the `value` prop of the `Square` component with index `0` to change from `null` to `X`.
+1. Ylävasemman neliön klikkaaminen suorittaa funktion, jonka `button` sai `onClick` propsina `Square` komponentilta. `Square` komponentti sai funktion `onSquareClick` propsina `Board` komponentilta. `Board` komponentti määritteli funktion suoraan JSX:ssä. Se kutsuu `handleClick` funktiota argumentilla `0`.
+1. `handleClick` käyttää argumenttia (`0`) päivittääkseen `squares` taulukon ensimmäisen elementin `null` arvosta `X` arvoon.
+1. `squares` tila `Board` komponentissa päivitettiin, joten `Board` ja kaikki sen alakomponentit renderöitiin uudelleen. Tämä aiheuttaa `Square` komponentin `value` propin muuttumisen indeksillä `0` `null` arvosta `X` arvoon.
 
-In the end the user sees that the upper left square has changed from empty to having a `X` after clicking it.
+Lopussa käyttäjä näkee, että ylävasen neliö on muuttunut tyhjästä `X`:ksi sen painamisen jälkeen.
 
 <Note>
 
-The DOM `<button>` element's `onClick` attribute has a special meaning to React because it is a built-in component. For custom components like Square, the naming is up to you. You could give any name to the `Square`'s `onSquareClick` prop or `Board`'s `handleClick` function, and the code would work the same. In React, it's conventional to use `onSomething` names for props which represent events and `handleSomething` for the function definitions which handle those events.
+DOM `<button>` elementin `onClick` attribuutilla on erityinen merkitys Reactissa, koska se on sisäänrakennettu komponentti. Mukautetuille komponenteille kuten `Square`, nimeäminen on sinusta kiinni. Voit antaa minkä tahansa nimen `Square` komponentin `onSquareClick` propsille tai `Board` komponentin `handleClick` funktiolle, ja koodi toimisi samalla tavalla. Reactissa, yleinen tapa on käyttää `onSomething` nimiä propseille, jotka edustavat tapahtumia ja `handleSomething` funktioille, jotka käsittelevät näitä tapahtumia.
 
 </Note>
 

From fdd0b39c1b3e281f7bdeb1309239788abb7418f9 Mon Sep 17 00:00:00 2001
From: Miro Rauhala <4082806+mirorauhala@users.noreply.github.com>
Date: Tue, 19 Sep 2023 19:33:55 +0300
Subject: [PATCH 13/34] Translate 'Why immutability is important'

---
 src/content/learn/tutorial-tic-tac-toe.md | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md
index d77f135ac..188534612 100644
--- a/src/content/learn/tutorial-tic-tac-toe.md
+++ b/src/content/learn/tutorial-tic-tac-toe.md
@@ -1337,29 +1337,29 @@ DOM `<button>` elementin `onClick` attribuutilla on erityinen merkitys Reactissa
 
 ### Miksi muuttumattomuus on tärkeää {/*why-immutability-is-important*/}
 
-Note how in `handleClick`, you call `.slice()` to create a copy of the `squares` array instead of modifying the existing array. To explain why, we need to discuss immutability and why immutability is important to learn.
+Huomaa miten `handleClick`:ssa kutsut `.slice()` luodaksesi kopion `squares` taulukosta sen sijaan, että muuttaisit olemassaolevaa taulukkoa. Selittääksemme miksi, meidän täytyy keskustella muuttumattomuudesta ja miksi muuttumattomuus on tärkeää oppia.
 
-There are generally two approaches to changing data. The first approach is to _mutate_ the data by directly changing the data's values. The second approach is to replace the data with a new copy which has the desired changes. Here is what it would look like if you mutated the `squares` array:
+On kaksi yleistä tapaa muuttaa dataa. Ensimmäinen tapa on *mutatoida* dataa muuttamalla suoraan datan arvoja. Toinen tapa on korvata data uudella kopiolla, jossa on halutut muutokset. Tässä on miltä se näyttäisi, jos mutatoisit `squares` taulukkoa:
 
 ```jsx
 const squares = [null, null, null, null, null, null, null, null, null];
 squares[0] = 'X';
-// Now `squares` is ["X", null, null, null, null, null, null, null, null];
+// Nyt`squares` on arvoltaan ["X", null, null, null, null, null, null, null, null];
 ```
 
-And here is what it would look like if you changed data without mutating the `squares` array:
+Ja tässä on miltä se näyttäisi jos muuttaisit dataa mutatoimatta `squares` taulukkoa:
 
 ```jsx
 const squares = [null, null, null, null, null, null, null, null, null];
 const nextSquares = ['X', null, null, null, null, null, null, null, null];
-// Now `squares` is unchanged, but `nextSquares` first element is 'X' rather than `null`
+// Nyt `squares` on muttumaton, mutta `nextSquares`:n ensimmäinen solu on 'X' `null`:n sijaan
 ```
 
-The result is the same but by not mutating (changing the underlying data) directly, you gain several benefits.
+Lopputulos on sama, mutta mutatoimatta (muuttamatta alla olevaa dataa) suoraan, saat useita etuja.
 
-Immutability makes complex features much easier to implement. Later in this tutorial, you will implement a "time travel" feature that lets you review the game's history and "jump back" to past moves. This functionality isn't specific to games--an ability to undo and redo certain actions is a common requirement for apps. Avoiding direct data mutation lets you keep previous versions of the data intact, and reuse them later.
+Muuttumattomuus tekee monimutkaisten ominaisuuksien toteuttamisesta paljon helpompaa. Myöhemmin tässä oppaassa, toteutat "aikamatkustuksen" ominaisuuden, joka antaa sinun tarkastella pelin historiaa ja "hypätä takaisin" menneisiin siirtoihin. Tämä toiminnallisuus ei ole pelien erityispiirre--kyky peruuttaa ja palauttaa tiettyjä toimintoja on yleinen vaatimus sovelluksille. Suoran datan mutaation välttäminen antaa sinun pitää edelliset versiot datasta ehjänä, ja käyttää niitä myöhemmin.
 
-There is also another benefit of immutability. By default, all child components re-render automatically when the state of a parent component changes. This includes even the child components that weren't affected by the change. Although re-rendering is not by itself noticeable to the user (you shouldn't actively try to avoid it!), you might want to skip re-rendering a part of the tree that clearly wasn't affected by it for performance reasons. Immutability makes it very cheap for components to compare whether their data has changed or not. You can learn more about how React chooses when to re-render a component in [the `memo` API reference](/reference/react/memo).
+On myös toinen etu muuttumattomuudessa. Oletuksena, kaikki lapsikomponentit renderöidään automaattisesti uudelleen, kun yläkomponentin tila muuttuu. Tämä sisältää jopa lapsikomponentit, jotka eivät olleet vaikuttuneita muutoksesta. Vaikka renderöinti ei ole itsessään huomattavaa käyttäjälle (sinun ei pitäisi aktiivisesti yrittää välttää sitä!), saatat haluta ohittaa renderöinnin puun osalta, joka ei selvästi ollut vaikuttunut siitä suorituskyky syistä. Muuttumattomuus tekee hyvin halvaksi komponenteille verrata onko niiden data muuttunut vai ei. Voit oppia lisää siitä, miten React valitsee milloin renderöidä komponentti uudelleen [`memo` API referenssistä](/reference/react/memo).
 
 ### Vuorojen ottaminen {/*taking-turns*/}
 

From 1e2bcd7dbdfb0958143cc639410be426e13fa5a9 Mon Sep 17 00:00:00 2001
From: Miro Rauhala <4082806+mirorauhala@users.noreply.github.com>
Date: Tue, 19 Sep 2023 19:50:30 +0300
Subject: [PATCH 14/34] Translate 'Taking turns'

---
 src/content/learn/tutorial-tic-tac-toe.md | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md
index 188534612..1586ef801 100644
--- a/src/content/learn/tutorial-tic-tac-toe.md
+++ b/src/content/learn/tutorial-tic-tac-toe.md
@@ -1363,9 +1363,9 @@ On myös toinen etu muuttumattomuudessa. Oletuksena, kaikki lapsikomponentit ren
 
 ### Vuorojen ottaminen {/*taking-turns*/}
 
-It's now time to fix a major defect in this tic-tac-toe game: the "O"s cannot be marked on the board.
+Nyt on aika korjata suuri vika tässä ristinolla-pelissä: "0":a ei voi merkitä pelilaudalle.
 
-You'll set the first move to be "X" by default. Let's keep track of this by adding another piece of state to the Board component:
+Asetat ensimmäisen siirron oletuksena "X":ksi. Pidetään kirjaa tästä lisäämällä toinen tilamuuttuja `Board` komponenttiin:
 
 ```js {2}
 function Board() {
@@ -1376,7 +1376,7 @@ function Board() {
 }
 ```
 
-Each time a player moves, `xIsNext` (a boolean) will be flipped to determine which player goes next and the game's state will be saved. You'll update the `Board`'s `handleClick` function to flip the value of `xIsNext`:
+Joka kerta kun pelaaja siirtää, `xIsNext` (totuusarvo) käännetään määrittämään kumpi pelaaja siirtää seuraavaksi ja pelin tila tallennetaan. Päivität `Board` komponentin `handleClick` funktion kääntämään `xIsNext` arvon:
 
 ```js {7,8,9,10,11,13}
 export default function Board() {
@@ -1400,15 +1400,15 @@ export default function Board() {
 }
 ```
 
-Now, as you click on different squares, they will alternate between `X` and `O`, as they should!
+Nyt kun klikkaat eri neliöitä, ne vaihtelevat `X` ja `0` välillä, kuten niiden pitäisi!
 
-But wait, there's a problem. Try clicking on the same square multiple times:
+Mutta hetkonen, tässä on ongelma. Kokeile klikata samaa neliötä useamman kerran:
 
-![O overwriting an X](../images/tutorial/o-replaces-x.gif)
+![0 ylikirjoittaa X:n](../images/tutorial/o-replaces-x.gif)
 
-The `X` is overwritten by an `O`! While this would add a very interesting twist to the game, we're going to stick to the original rules for now.
+`X` ylikirjoitetaan `0`:lla! Vaikka tämä lisäisikin mielenkiint0isen käänteen peliin, pysytään alkuperäisissä säännöissä toistaiseksi.
 
-When you mark a square with a `X` or an `O` you aren't first checking to see if the square already has a `X` or `O` value. You can fix this by *returning early*. You'll check to see if the square already has a `X` or an `O`. If the square is already filled, you will `return` in the `handleClick` function early--before it tries to update the board state.
+Kun merkitset neliön `X`:llä tai `0`:lla, et ensin tarkista onko neliöllä jo `X` tai `0` arvoa. Voit korjata tämän *palaamalla aikaisin*. Tarkistat onko neliöllä jo `X` tai `0` arvo. Jos neliö on jo täytetty, `return` `handleClick` funktiossa aikaisin--ennen kuin se yrittää päivittää pelilaudan tilaa.
 
 ```js {2,3,4}
 function handleClick(i) {
@@ -1420,7 +1420,7 @@ function handleClick(i) {
 }
 ```
 
-Now you can only add `X`'s or `O`'s to empty squares! Here is what your code should look like at this point:
+Nyt voit lisätä vain `X` tai `0` tyhjille neliöille! Tässä on mitä koodisi tulisi näyttää tässä vaiheessa:
 
 <Sandpack>
 

From e259d1581655acd7e53c98a91af0f26866f3e722 Mon Sep 17 00:00:00 2001
From: Miro Rauhala <4082806+mirorauhala@users.noreply.github.com>
Date: Tue, 19 Sep 2023 20:01:45 +0300
Subject: [PATCH 15/34] Translate 'Declaring a winner'

---
 src/content/learn/tutorial-tic-tac-toe.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md
index 1586ef801..88df9f57c 100644
--- a/src/content/learn/tutorial-tic-tac-toe.md
+++ b/src/content/learn/tutorial-tic-tac-toe.md
@@ -1524,7 +1524,7 @@ body {
 
 ### Voittajan päättäminen {/*declaring-a-winner*/}
 
-Now that the players can take turns, you'll want to show when the game is won and there are no more turns to make. To do this you'll add a helper function called `calculateWinner` that takes an array of 9 squares, checks for a winner and returns `'X'`, `'O'`, or `null` as appropriate. Don't worry too much about the `calculateWinner` function; it's not specific to React:
+Nyt kun pelaajat voivat ottaa vuoroja, haluat näyttää kun peli on voitettu ja ei ole enää vuoroja tehtävänä. Tämän tekemiseksi lisäät apufunktion nimeltä `calculateWinner`, joka ottaa yhdeksän neliön taulukon, tarkistaa onko voittaja ja palauttaa `'X'`, `'O'`, tai `null` tarvittaessa. Älä huoli liikaa `calculateWinner` funktiosta; se ei ole Reactiin erityinen:
 
 ```js App.js
 export default function Board() {
@@ -1554,11 +1554,11 @@ function calculateWinner(squares) {
 
 <Note>
 
-It does not matter whether you define `calculateWinner` before or after the `Board`. Let's put it at the end so that you don't have to scroll past it every time you edit your components.
+Ei ole väliä määritteletkö `calculateWinner` ennen vai jälkeen `Board`:n. Laitetaan se loppuun, jotta sinun ei tarvitse selata sen ohi joka kerta kun muokkaat komponenttejasi.
 
 </Note>
 
-You will call `calculateWinner(squares)` in the `Board` component's `handleClick` function to check if a player has won. You can perform this check at the same time you check if a user has clicked a square that already has a `X` or and `O`. We'd like to return early in both cases:
+Kutsut `calculateWinner(squares)` `Board` komponentin `handleClick` funktiossa tarkistaaksesi onko pelaaja voittanut. Voit suorittaa tämän tarkistuksen samaan aikaan kun tarkistat onko käyttäjä klikannut neliötä, jossa on jo `X` tai `O`. Haluamme palata aikaisin molemmissa tapauksissa:
 
 ```js {2}
 function handleClick(i) {
@@ -1570,7 +1570,7 @@ function handleClick(i) {
 }
 ```
 
-To let the players know when the game is over, you can display text such as "Winner: X" or "Winner: O". To do that you'll add a `status` section to the `Board` component. The status will display the winner if the game is over and if the game is ongoing you'll display which player's turn is next:
+Antaaksesi pelaajiesi tietää milloin peli on ohi, voit näyttää tekstin kuten "Winner: X" tai "Winner: 0". Tämän tekemiseksi lisäät `status` osion `Board` komponenttiin. Status näyttää voittajan, jos peli on ohi ja jos peli on kesken, näytät kumman pelaajan vuoro on seuraavaksi:
 
 ```js {3-9,13}
 export default function Board() {
@@ -1592,7 +1592,7 @@ export default function Board() {
 }
 ```
 
-Congratulations! You now have a working tic-tac-toe game. And you've just learned the basics of React too. So _you_ are the real winner here. Here is what the code should look like:
+Onneksi olkoon! Sinulla on nyt toimi ristinolla-peli. Ja olet juuri oppinut Reactin perusteet. Joten *sinä* olet oikea voittaja tässä. Tässä on miltä koodisi tulisi näyttää:
 
 <Sandpack>
 

From b7bc356fe88221b3a86ae649d91876e28736a6eb Mon Sep 17 00:00:00 2001
From: Miro Rauhala <4082806+mirorauhala@users.noreply.github.com>
Date: Tue, 19 Sep 2023 20:02:37 +0300
Subject: [PATCH 16/34] Translate 'Adding time travel'

---
 src/content/learn/tutorial-tic-tac-toe.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md
index 88df9f57c..bf6e33ad8 100644
--- a/src/content/learn/tutorial-tic-tac-toe.md
+++ b/src/content/learn/tutorial-tic-tac-toe.md
@@ -1725,7 +1725,7 @@ body {
 
 ## Aikamatkustuksen lisääminen {/*adding-time-travel*/}
 
-As a final exercise, let's make it possible to "go back in time" to the previous moves in the game.
+Lopullisena harjoituksena, tehdään mahdolliseksi "aikamatkustus ajassa taaksepäin" edellisiin siirtoihin pelissä.
 
 ### Pelin siirtojen tallentaminen {/*storing-a-history-of-moves*/}
 

From 220166d269dd06562212de040c5f33ffec13ca9f Mon Sep 17 00:00:00 2001
From: Miro Rauhala <4082806+mirorauhala@users.noreply.github.com>
Date: Tue, 19 Sep 2023 20:05:39 +0300
Subject: [PATCH 17/34] Translate 'Storing a history of moves'

---
 src/content/learn/tutorial-tic-tac-toe.md | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md
index bf6e33ad8..8096e271b 100644
--- a/src/content/learn/tutorial-tic-tac-toe.md
+++ b/src/content/learn/tutorial-tic-tac-toe.md
@@ -1729,19 +1729,19 @@ Lopullisena harjoituksena, tehdään mahdolliseksi "aikamatkustus ajassa taaksep
 
 ### Pelin siirtojen tallentaminen {/*storing-a-history-of-moves*/}
 
-If you mutated the `squares` array, implementing time travel would be very difficult.
+Jos mutatoit `squares` taulukkoa, aikamatkustuksen toteuttaminen olisi hyvin vaikeaa.
 
-However, you used `slice()` to create a new copy of the `squares` array after every move, and treated it as immutable. This will allow you to store every past version of the `squares` array, and navigate between the turns that have already happened.
+Kuitenkin, jos käytit `slice()`:a luodaksesi uuden kopion `squares` taulukosta jokaisen siirron jälkeen, ja käsitellä sitä muuttumattomana. Tämä antaa sinun tallentaa jokaisen edellisen version `squares` taulukosta, ja navigoida niiden välillä, jotka ovat jo tapahtuneet.
 
-You'll store the past `squares` arrays in another array called `history`, which you'll store as a new state variable. The `history` array represents all board states, from the first to the last move, and has a shape like this:
+Tallennat aikaisemmat `squares` taulukot toiseen taulukoon nimeltään `history`, jonka toteutat uutena tilamuuttujana. `history` taulukko edustaa kaikkia pelilaudan tiloja, ensimmäisestä viimeiseen siirtoon, ja sillä on tämän kaltainen muoto:
 
 ```jsx
 [
-  // Before first move
+  // Ennen ensimmäistä liikettä
   [null, null, null, null, null, null, null, null, null],
-  // After first move
+  // Ensimmäisen liikkeen jälkeen
   [null, null, null, null, 'X', null, null, null, null],
-  // After second move
+  // Toisen liikkeen jälkeen
   [null, null, null, null, 'X', null, null, null, 'O'],
   // ...
 ]

From 2add77aa48b5289b78abd695c65198c4a0d991aa Mon Sep 17 00:00:00 2001
From: Miro Rauhala <4082806+mirorauhala@users.noreply.github.com>
Date: Tue, 19 Sep 2023 20:40:58 +0300
Subject: [PATCH 18/34] Translate 'Lifting state up again'

---
 src/content/learn/tutorial-tic-tac-toe.md | 32 +++++++++++------------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md
index 8096e271b..12b2ad2e4 100644
--- a/src/content/learn/tutorial-tic-tac-toe.md
+++ b/src/content/learn/tutorial-tic-tac-toe.md
@@ -1749,11 +1749,11 @@ Tallennat aikaisemmat `squares` taulukot toiseen taulukoon nimeltään `history`
 
 ### Tilan nostaminen ylös, uudestaan {/*lifting-state-up-again*/}
 
-You will now write a new top-level component called `Game` to display a list of past moves. That's where you will place the `history` state that contains the entire game history.
+Tulet kirjoittamaan uuden ylätason komponentin nimeltään `Game` näyttämään listan aiemmista liikkeistä. Tähän tulee `history` tila, joka sisältää koko pelin historian.
 
-Placing the `history` state into the `Game` component will let you remove the `squares` state from its child `Board` component. Just like you "lifted state up" from the `Square` component into the `Board` component, you will now lift it up from the `Board` into the top-level `Game` component. This gives the `Game` component full control over the `Board`'s data and lets it instruct the `Board` to render previous turns from the `history`.
+`history` tilan asettaminen `Game` komponenttiin antaa sinun poistaa `squares` tilan sen `Board` alakomponentista. Aivan kuten "nostit tilan ylös" `Square` komponentista `Board` komponenttiin, nostat sen nyt `Board` komponentista ylätason `Game` komponenttiin. Tämä antaa `Game` komponentille täyden kontrollin `Board`:n datan yli ja antaa sen ohjata `Board` komponenttia renderöimään edelliset vuorot `history`:sta.
 
-First, add a `Game` component with `export default`. Have it render the `Board` component and some markup:
+Ensiksi, lisää `Game` komponentti `export default`:lla. Aseta se renderöimään `Board` komponentti ja joitain merkintäkoodia:
 
 ```js {1,5-16}
 function Board() {
@@ -1774,9 +1774,9 @@ export default function Game() {
 }
 ```
 
-Note that you are removing the `export default` keywords before the `function Board() {` declaration and adding them before the `function Game() {` declaration. This tells your `index.js` file to use the `Game` component as the top-level component instead of your `Board` component. The additional `div`s returned by the `Game` component are making room for the game information you'll add to the board later.
+Huomaa, että olet poistamassa `export default` avainsanat ennen `function Board() {` määrittelyä ja lisäämässä ne ennen `function Game() {` määrittelyä. Tämä kertoo `index.js` tiedostolle käyttää `Game` komponenttia ylätason komponenttina sen sijaan, että käyttäisit `Board` komponenttia. Lisä `div`:t, jotka `Game` komponentti palauttaa, tekevät tilaa pelin tiedoille, jotka lisäät pelilaudalle myöhemmin.
 
-Add some state to the `Game` component to track which player is next and the history of moves:
+Lisää tila `Game` komponenttiin seuraamaan kumpi pelaaja on seuraavaksi ja pelin siirtojen historia:
 
 ```js {2-3}
 export default function Game() {
@@ -1785,9 +1785,9 @@ export default function Game() {
   // ...
 ```
 
-Notice how `[Array(9).fill(null)]` is an array with a single item, which itself is an array of 9 `null`s.
+Huomaa miten `[Array(9).fill(null)]` on taulukko, jossa on yksi alkio, joka on taulukko, jossa on 9 `null`:a.
 
-To render the squares for the current move, you'll want to read the last squares array from the `history`. You don't need `useState` for this--you already have enough information to calculate it during rendering:
+Renderöidäksesi neliöt nykyiselle siirrolle, luet viimeisen `squares` taulukon `history`:sta. Et tarvitse `useState`:a tähän--sinulla on jo tarpeeksi tietoa laskeaksesi se renderöinnin aikana:
 
 ```js {4}
 export default function Game() {
@@ -1797,7 +1797,7 @@ export default function Game() {
   // ...
 ```
 
-Next, create a `handlePlay` function inside the `Game` component that will be called by the `Board` component to update the game. Pass `xIsNext`, `currentSquares` and `handlePlay` as props to the `Board` component:
+Seuraavaksi, luo `handlePlay` funktio `Game` komponenttiin, jota kutsutaan `Board` komponentin toimesta päivittämään peliä. Välitä `xIsNext`, `currentSquares` ja `handlePlay` propseina `Board` komponentille:
 
 ```js {6-8,13}
 export default function Game() {
@@ -1818,7 +1818,7 @@ export default function Game() {
 }
 ```
 
-Let's make the `Board` component fully controlled by the props it receives. Change the `Board` component to take three props: `xIsNext`, `squares`, and a new `onPlay` function that `Board` can call with the updated squares array when a player makes a move. Next, remove the first two lines of the `Board` function that call `useState`:
+Tehdään `Board` komponentista täysin propseilla kontrolloitava. Muuta `Board` komponentti ottamaan kolme propia: `xIsNext`, `squares`, ja uusi `onPlay` funktio, jota `Board` voi kutsua päivitetyn taulukon kanssa, kun pelaaja tekee siirron. Poista seuraavaksi kaksi ensimmäistä riviä `Board` funktiosta, jotka kutsuvat `useState`:a:
 
 ```js {1}
 function Board({ xIsNext, squares, onPlay }) {
@@ -1829,7 +1829,7 @@ function Board({ xIsNext, squares, onPlay }) {
 }
 ```
 
-Now replace the `setSquares` and `setXIsNext` calls in `handleClick` in the `Board` component with a single call to your new `onPlay` function so the `Game` component can update the `Board` when the user clicks a square:
+Nyt korvaa `setSquares` ja `setXIsNext` kutsut `handleClick`:ssa `Board` komponentissa yhdellä kutsulla uuteen `onPlay` funktioon, jotta `Game` komponentti voi päivittää `Board`:n, kun käyttäjä klikkaa neliötä:
 
 ```js {12}
 function Board({ xIsNext, squares, onPlay }) {
@@ -1849,11 +1849,11 @@ function Board({ xIsNext, squares, onPlay }) {
 }
 ```
 
-The `Board` component is fully controlled by the props passed to it by the `Game` component. You need to implement the `handlePlay` function in the `Game` component to get the game working again.
+`Board` komponentti on täysin kontrolloitu propseilla, jotka sille välitetään `Game` komponentista. Sinun täytyy toteuttaa `handlePlay` funktio `Game` komponenttiin saadaksesi pelin toimimaan uudestaan.
 
-What should `handlePlay` do when called? Remember that Board used to call `setSquares` with an updated array; now it passes the updated `squares` array to `onPlay`.
+Mitä `handlePlay`:n tulisi tehdä kun sitä kutsutaan? Muista, että `Board` kutsui `setSquares`:ia päivitetyllä taulukolla. Nyt se välittää päivitetyn `squares` taulukon `onPlay`:lle.
 
-The `handlePlay` function needs to update `Game`'s state to trigger a re-render, but you don't have a `setSquares` function that you can call any more--you're now using the `history` state variable to store this information. You'll want to update `history` by appending the updated `squares` array as a new history entry. You also want to toggle `xIsNext`, just as Board used to do:
+`handlePlay` funktion täytyy päivittää `Game`:n tila käynnistääkseen renderöinnin, mutta sinulla ei ole enää `setSquares` funktiota, jota voit kutsua--käytät nyt `history` tilamuuttujaa tallentaaksesi tämän tiedon. Haluat päivittää `history`:n lisäämällä päivitetyn `squares` taulukon uutena historiaan. Haluat myös kääntää `xIsNext`:n, aivan kuten `Board` teki ennen:
 
 ```js {4-5}
 export default function Game() {
@@ -1866,11 +1866,11 @@ export default function Game() {
 }
 ```
 
-Here, `[...history, nextSquares]` creates a new array that contains all the items in `history`, followed by `nextSquares`. (You can read the `...history` [*spread syntax*](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) as "enumerate all the items in `history`".)
+Tässä, `[...history, nextSquares]` luo uuden taulukon, joka sisältää kaikki `history`:n alkiot, seurattuna `nextSquares`:lla. (Voit lukea `...history` [*spread syntaksin*](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) "luettele kaikki `history` taulukon alkiot".)
 
-For example, if `history` is `[[null,null,null], ["X",null,null]]` and `nextSquares` is `["X",null,"O"]`, then the new `[...history, nextSquares]` array will be `[[null,null,null], ["X",null,null], ["X",null,"O"]]`.
+Esimerkiksi, jos `history` on `[[null,null,null], ["X",null,null]]` ja `nextSquares` on `["X",null,"0"]`, niin uusi `[...history, nextSquares]` taulukko on `[[null,null,null], ["X",null,null], ["X",null,"0"]]`.
 
-At this point, you've moved the state to live in the `Game` component, and the UI should be fully working, just as it was before the refactor. Here is what the code should look like at this point:
+Tässä kohtaa, olet siirtänyt tilan `Game` komponenttiin, ja käyttöliittymä tulisi toimia täysin, aivan kuten ennen refaktorointia. Tässä on miltä koodisi tulisi näyttää tässä vaiheessa:
 
 <Sandpack>
 

From 362683b65b1348688dc74d6b5437ee36024012aa Mon Sep 17 00:00:00 2001
From: Miro Rauhala <4082806+mirorauhala@users.noreply.github.com>
Date: Tue, 19 Sep 2023 20:51:31 +0300
Subject: [PATCH 19/34] Translate 'Showing the past moves'

---
 src/content/learn/tutorial-tic-tac-toe.md | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md
index 12b2ad2e4..2cd3b71f2 100644
--- a/src/content/learn/tutorial-tic-tac-toe.md
+++ b/src/content/learn/tutorial-tic-tac-toe.md
@@ -2021,17 +2021,17 @@ body {
 
 ### Aikaisempien liikkeiden näyttäminen {/*showing-the-past-moves*/}
 
-Since you are recording the tic-tac-toe game's history, you can now display a list of past moves to the player.
+Kerta olet nauhoittamassa ristinolla-pelin historiaa, voit nyt näyttää listan aikaisemmista siirroista pelaajalle.
 
-React elements like `<button>` are regular JavaScript objects; you can pass them around in your application. To render multiple items in React, you can use an array of React elements.
+React-elementit kuten `<button>` ovat tavallisia JavaScript olioita; voit välittää niitä ympäri sovellustasi. Renderöidäksesi useita kohteita Reactissa, voit käyttää React elementtien taulukkoa.
 
-You already have an array of `history` moves in state, so now you need to transform it to an array of React elements. In JavaScript, to transform one array into another, you can use the [array `map` method:](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)
+Sinulla on jo `history` taukukko siirroista tilassa, joten nyt sinun täytyy muuttaa se React elementtien taulukoksi. JavaScriptissä, muuttaaksesi yhden taulukon toiseksi, voit käyttää [taulukon `map` metodia:](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)
 
 ```jsx
 [1, 2, 3].map((x) => x * 2) // [2, 4, 6]
 ```
 
-You'll use `map` to transform your `history` of moves into React elements representing buttons on the screen, and display a list of buttons to "jump" to past moves. Let's `map` over the `history` in the Game component:
+Haluat käyttää `map` metodia muuntaaksesi `history` siirroista React elementtien taulukoksi, jotka edustavat painikkeita näytöllä, ja näyttääksesi listan painikkeista "hyppäämään" aikaisempiin siirtoihin. Käytetään `map` metodia `history`:n yli `Game` komponentissa:
 
 ```js {11-13,15-27,35}
 export default function Game() {
@@ -2075,7 +2075,7 @@ export default function 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: ``Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `Game`.`` You'll fix this error in the next section.
+Voit nähdä miltä koodisi tulisi näyttää alla. Huomaa, että sinun tulisi nähdä virhe kehittäjätyökalujen konsolissa, joka sanoo: ``Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `Game`.`` Korjaat tämän virheen seuraavassa osiossa.
 
 <Sandpack>
 
@@ -2243,11 +2243,11 @@ body {
 
 </Sandpack>
 
-As you iterate through `history` array inside the function you passed to `map`, the `squares` argument goes through each element of `history`, and the `move` argument goes through each array index: `0`, `1`, `2`, …. (In most cases, you'd need the actual array elements, but to render a list of moves you will only need indexes.)
+Kun iteroidaan `history` taulukon läpi funktiossa, jonka välitit `map`:lle, `squares` argumentti käy läpi jokaisen `history` alkion, ja `move` argumentti käy läpi jokaisen taulukon indeksin: `0`, `1`, `2`, …. (Useimmissa tapauksissa, tarvitsisit itse taulukon alkiot, mutta renderöidäksesi listan siirroista, tarvitset vain indeksit.)
 
-For each move in the tic-tac-toe game's history, you create a list item `<li>` which contains a button `<button>`. The button has an `onClick` handler which calls a function called `jumpTo` (that you haven't implemented yet).
+Jokaiselle liikkeelle ristinolla-pelin historiassa, luot listan kohteen `<li>`, joka sisältää painikkeen `<button>`. Painikkeella on `onClick` käsittelijä, joka kutsuu funktiota nimeltä `jumpTo` (jota et ole vielä toteuttanut).
 
-For now, you should see a list of the moves that occurred in the game and an error in the developer tools console. Let's discuss what the "key" error means.
+Toistaiseksi, sinun tulisi nähdä lista liikeistä, jotka tapahtuivat pelissä ja virhe kehittäjätyökalujen konsolissa. Keskustellaan mitä "key" virhe tarkoittaa.
 
 ### Avaimen valinta {/*picking-a-key*/}
 

From 97436269a1677db9dbbf0f53c439aac58bb3634e Mon Sep 17 00:00:00 2001
From: Miro Rauhala <4082806+mirorauhala@users.noreply.github.com>
Date: Tue, 19 Sep 2023 21:02:46 +0300
Subject: [PATCH 20/34] Translate 'Picking a key'

---
 src/content/learn/tutorial-tic-tac-toe.md | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md
index 2cd3b71f2..1871996ce 100644
--- a/src/content/learn/tutorial-tic-tac-toe.md
+++ b/src/content/learn/tutorial-tic-tac-toe.md
@@ -2251,16 +2251,16 @@ Toistaiseksi, sinun tulisi nähdä lista liikeistä, jotka tapahtuivat pelissä
 
 ### Avaimen valinta {/*picking-a-key*/}
 
-When you render a list, React stores some information about each rendered list item. When you update a list, React needs to determine what has changed. You could have added, removed, re-arranged, or updated the list's items.
+Kun renderöit listan, React tallentaa tietoa jokaisesta renderöidystä listan alkiosta. Kun päivität listaa, React tarvitsee määrittää mitä on muuttunut. Saatat olla lisännyt, poistanut, järjestänyt uudelleen, tai päivittänyt listan alkiot.
 
-Imagine transitioning from
+Kuvittele siirtyväsi tästä
 
 ```html
 <li>Alexa: 7 tasks left</li>
 <li>Ben: 5 tasks left</li>
 ```
 
-to
+tähän
 
 ```html
 <li>Ben: 9 tasks left</li>
@@ -2268,7 +2268,7 @@ to
 <li>Alexa: 5 tasks left</li>
 ```
 
-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 can't 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.
+Lukujen päivittämisen lisäksi, ihminen lukisi tämän todennäköisesti niin, että vaihdoit Alexan ja Benin järjestystä ja lisäsit Claudian Alexan ja Benin väliin. Kuitenkin, React on tietokoneohjelma eikä voi tietää mitä tarkoitit, joten sinun täytyy määrittää `key` ominaisuus jokaiselle listan alkiolle erottaaksesi jokaisen listan alkion sen sisaruksista. Jos datasi olisi tietokannasta, Alexan, Benin ja Claudian tietokannan ID:tä voitaisiin käyttää avaimina.
 
 ```js {1}
 <li key={user.id}>
@@ -2276,17 +2276,17 @@ In addition to the updated counts, a human reading this would probably say that
 </li>
 ```
 
-When a list is re-rendered, React takes each list item's key and searches the previous list's items for a matching key. If the current list has a key that didn't exist before, React creates a component. If the current list is missing a key that existed in the previous list, React destroys the previous component. If two keys match, the corresponding component is moved.
+Kun lista renderöidään uudelleen, React ottaa jokaisen listan alkion avaimen ja etsii edellisen listan alkiot vastaavalla avaimella. Jos nykyisellä listalla on avain, jota ei ollut aiemmin, React luo komponentin. Jos nykyisellä listalla ei ole avainta, joka oli edellisellä listalla, React tuhoaa edellisen komponentin. Jos kaksi avainta vastaavat, vastaava komponentti siirretään.
 
-Keys tell React about the identity of each component, which allows React to maintain state between re-renders. If a component's key changes, the component will be destroyed and re-created with a new state.
+Avaimet kertovat reactille jokaisen komponentin identiteetistä, joka antaa Reactille mahdollisuuden ylläpitää tilaa uudelleenrenderöintien välillä. Jos komponentin avain muuttuu, komponentti tuhotaan ja luodaan uudelleen uudella tilalla.
 
-`key` is a special and reserved property in React. When an element is created, React extracts the `key` property and stores the key directly on the returned element. Even though `key` may look like it is passed as props, React automatically uses `key` to decide which components to update. There's no way for a component to ask what `key` its parent specified.
+`key` on erityinen ja varattu ominaisuus Reactissa. Kun elementti luodaan, React ottaa `key` ominaisuuden ja tallentaa avaimen suoraan palautettuun elementtiin. Vaikka `key` näyttäisi välitetyltä propseina, React käyttää automaattisesti `key`:tä päättääkseen mitä komponentteja päivittää. Komponentilla ei ole tapaa kysyä minkä `key`:n sen vanhempi on määrittänyt.
 
-**It's strongly recommended that you assign proper keys whenever you build dynamic lists.** If you don't have an appropriate key, you may want to consider restructuring your data so that you do.
+**On erittäin suositeltavaa, että asetat oikeat avaimet aina kun rakennat dynaamisia listoja.** Jos sinulla ei ole sopivaa avainta, saatat haluta harkita datan uudelleenjärjestämistä, jotta sinulla olisi.
 
-If no key is specified, React will report an error and use the array index as a key by default. Using the array index as a key is problematic when trying to re-order a list's items or inserting/removing list items. Explicitly passing `key={i}` silences the error but has the same problems as array indices and is not recommended in most cases.
+Jos avainta ei ole määritelty, React raportoi virheen ja käyttää taulukon indeksiä avaimena oletuksena. Taulukon indeksin käyttäminen avaimena on ongelmallista, kun yritetään järjestää listan kohteita uudelleen tai lisätä/poistaa listan kohteita. `key={i}` avaimen välittäminen hiljentää virheen, mutta sillä on samat ongelmat kuin taulukon indekseillä ja sitä ei suositella useimmissa tapauksissa.
 
-Keys do not need to be globally unique; they only need to be unique between components and their siblings.
+Avainten ei tarvitse olla globaalisti uniikkeja. Riittää, että ne ovat uniikkeja komponenttien ja niiden sisarusten välillä.
 
 ### Aikamatkustuksen toteutus {/*implementing-time-travel*/}
 

From 12167871a05fbb5064163b324f858d3faf76b631 Mon Sep 17 00:00:00 2001
From: Miro Rauhala <4082806+mirorauhala@users.noreply.github.com>
Date: Tue, 19 Sep 2023 21:07:56 +0300
Subject: [PATCH 21/34] Translate 'Implementing time travel'

---
 src/content/learn/tutorial-tic-tac-toe.md | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md
index 1871996ce..f6f1aa3bf 100644
--- a/src/content/learn/tutorial-tic-tac-toe.md
+++ b/src/content/learn/tutorial-tic-tac-toe.md
@@ -2290,9 +2290,9 @@ Avainten ei tarvitse olla globaalisti uniikkeja. Riittää, että ne ovat uniikk
 
 ### Aikamatkustuksen toteutus {/*implementing-time-travel*/}
 
-In the tic-tac-toe game's history, each past move has a unique ID associated with it: it's the sequential number of the move. Moves will never be re-ordered, deleted, or inserted in the middle, so it's safe to use the move index as a key.
+Ristinolla-pelin historiassa, jokaisella aikaisemmalla siirrolla on uniikki ID: se on siirron järjestysnumero. Siirtoja ei koskaan järjestetä uudelleen, poisteta tai lisätä keskelle, joten on turvallista käyttää siirron indeksiä avaimena.
 
-In the `Game` function, you can add the key as `<li key={move}>`, and if you reload the rendered game, React's "key" error should disappear:
+`Game` funktiossa, voit lisätä avaimen `<li key={move}>`, ja jos lataat pelin uudelleen, Reactin "key" virheen tulisi kadota:
 
 ```js {4}
 const moves = history.map((squares, move) => {
@@ -2484,7 +2484,7 @@ export default function Game() {
 }
 ```
 
-Next, update the `jumpTo` function inside `Game` to update that `currentMove`. You'll also set `xIsNext` to `true` if the number that you're changing `currentMove` to is even.
+Seuraavaksi, päivitä `jumpTo` funktio `Game`:n sisällä päivittämään `currentMove`. Asetat myös `xIsNext` arvoon `true`, jos numero, jota olet muuttamassa `currentMove`:ksi on parillinen.
 
 ```js {4-5}
 export default function Game() {
@@ -2497,10 +2497,10 @@ export default function Game() {
 }
 ```
 
-You will now make two changes to the `Game`'s `handlePlay` function which is called when you click on a square.
+Teet nyt kaksi muutosta `Game` komponentin `handlePlay` funktioon, joka kutsutaan kun klikkaat ruutua.
 
-- If you "go back in time" and then make a new move from that point, you only want to keep the history up to that point. Instead of adding `nextSquares` after all items (`...` spread syntax) in `history`, you'll add it after all items in `history.slice(0, currentMove + 1)` so that you're only keeping that portion of the old history.
-- Each time a move is made, you need to update `currentMove` to point to the latest history entry.
+- Jos "palaat ajassa taaksepäin" ja teet uuden siirron siitä pisteestä, haluat pitää historian vain siihen pisteeseen asti. Sen sijaan, että lisäisit `nextSquares` kaikkien kohteiden (`...` spread-syntaksi) jälkeen `history`:ssa, lisäät sen kaikkien kohteiden jälkeen `history.slice(0, currentMove + 1)` jotta pidät vain sen osan vanhasta historiasta.
+- Joka kerta kun siirto tehdään, sinun täytyy päivittää `currentMove` osoittamaan viimeisimpään historiaan.
 
 ```js {2-4}
 function handlePlay(nextSquares) {
@@ -2511,7 +2511,7 @@ function handlePlay(nextSquares) {
 }
 ```
 
-Finally, you will modify the `Game` component to render the currently selected move, instead of always rendering the final move:
+Lopuksi, muutat `Game` komponenttia renderöimään valitun siirron, sen sijaan että renderöisit aina viimeisimmän siirron:
 
 ```js {5}
 export default function Game() {
@@ -2524,7 +2524,7 @@ export default function Game() {
 }
 ```
 
-If you click on any step in the game's history, the tic-tac-toe board should immediately update to show what the board looked like after that step occurred.
+Jos klikkaat mitä tahansa siirtoa pelin historiassa, ristinolla-pelin taulukko tulisi päivittyä näyttämään miltä taulukko näytti sen siirron jälkeen.
 
 <Sandpack>
 

From 08a033a5babd6dd25330c9bdb2b77fb336abc238 Mon Sep 17 00:00:00 2001
From: Miro Rauhala <4082806+mirorauhala@users.noreply.github.com>
Date: Tue, 19 Sep 2023 21:16:14 +0300
Subject: [PATCH 22/34] Translate 'Final cleanup'

---
 src/content/learn/tutorial-tic-tac-toe.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md
index f6f1aa3bf..b9580f744 100644
--- a/src/content/learn/tutorial-tic-tac-toe.md
+++ b/src/content/learn/tutorial-tic-tac-toe.md
@@ -2697,9 +2697,9 @@ body {
 
 ### Loppusiivous {/*final-cleanup*/}
 
-If you look at the code very closely, you may notice that `xIsNext === true` when `currentMove` is even and `xIsNext === false` when `currentMove` is odd. In other words, if you know the value of `currentMove`, then you can always figure out what `xIsNext` should be.
+Jos katsot koodia tarkasti, saatat huomata, että `xIsNext === true` kun `currentMove` on parillinen ja `xIsNext === false` kun `currentMove` on pariton. Toisin sanoen, jos tiedät `currentMove` arvon, voit aina selvittää mitä `xIsNext` arvon tulisi olla.
 
-There's no reason for you to store both of these in state. In fact, always try to avoid redundant state. Simplifying what you store in state reduces bugs and makes your code easier to understand. Change `Game` so that it doesn't store `xIsNext` as a separate state variable and instead figures it out based on the `currentMove`:
+Ei ole mitään syytä säilyttää molempia näitä tilassa. Itse asiassa, yritä aina välttää turhaa tilaa. Yksinkertaistamalla mitä säilytät tilassa vähentää bugeja ja tekee koodistasi helpommin ymmärrettävää. Muuta `Game` niin, että se ei säilytä `xIsNext` erillisenä tilamuuttujana ja sen sijaan selvittää sen `currentMove`:n perusteella:
 
 ```js {4,11,15}
 export default function Game() {
@@ -2721,7 +2721,7 @@ export default function Game() {
 }
 ```
 
-You no longer need the `xIsNext` state declaration or the calls to `setXIsNext`. Now, there's no chance for `xIsNext` to get out of sync with `currentMove`, even if you make a mistake while coding the components.
+Et enää tarvitse `xIsNext` tilan määrittelyä tai kutsuja `setXIsNext`. Nyt, ei ole mahdollisuutta, että `xIsNext` pääsee epäsynkroniin `currentMove`:n kanssa, vaikka tekisit virheen koodatessasi komponentteja.
 
 ### Lopetus {/*wrapping-up*/}
 

From f1d1ec1fb52796d95415520b10bcbcd8ddd21f53 Mon Sep 17 00:00:00 2001
From: Miro Rauhala <4082806+mirorauhala@users.noreply.github.com>
Date: Tue, 19 Sep 2023 21:16:31 +0300
Subject: [PATCH 23/34] Translate 'Wrapping up'

---
 src/content/learn/tutorial-tic-tac-toe.md | 28 +++++++++++------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md
index b9580f744..e1368660a 100644
--- a/src/content/learn/tutorial-tic-tac-toe.md
+++ b/src/content/learn/tutorial-tic-tac-toe.md
@@ -2725,16 +2725,16 @@ Et enää tarvitse `xIsNext` tilan määrittelyä tai kutsuja `setXIsNext`. Nyt,
 
 ### Lopetus {/*wrapping-up*/}
 
-Congratulations! You've created a tic-tac-toe game that:
+Onneksi olkoon! Olet luonut ristinolla-pelin, joka:
 
-- Lets you play tic-tac-toe,
-- Indicates when a player has won the game,
-- Stores a game's history as a game progresses,
-- Allows players to review a game's history and see previous versions of a game's board.
+- Antaa sinun pelata ristinollaa,
+- Ilmoittaa kun pelaaja on voittanut peli,
+- Tallentaa pelin historian pelin edetessä,
+- Antaa pelaajan palata takaisin pelin historiassa ja katsoa edellisiä versioita pelin taulukosta.
 
-Nice work! We hope you now feel like you have a decent grasp of how React works.
+Hyvää työtä! Toivottavasti tunnet nyt, että sinulla on hyvä käsitys siitä miten React toimii. 
 
-Check out the final result here:
+Katso lopullinen tulos täältä:
 
 <Sandpack>
 
@@ -2903,12 +2903,12 @@ body {
 
 </Sandpack>
 
-If you have extra time or want to practice your new React skills, here are some ideas for improvements that you could make to the tic-tac-toe game, listed in order of increasing difficulty:
+Jos sinulla on ylimääräistä aikaa tai haluat harjoitella uusia React taitojasi, tässä on joitain ideoita parannuksista, joita voisit tehdä ristinolla-peliin, listattuna vaikeusjärjestyksessä:
 
-1. For the current move only, show "You are at move #..." instead of a button.
-1. Rewrite `Board` to use two loops to make the squares instead of hardcoding them.
-1. Add a toggle button that lets you sort the moves in either ascending or descending order.
-1. When someone wins, highlight the three squares that caused the win (and when no one wins, display a message about the result being a draw).
-1. Display the location for each move in the format (row, col) in the move history list.
+1. Nykyiselle siirrolle, näytä "Olet siirrossa #..." sen sijaan, että näyttäisit painikkeen.
+1. Kirjoita `Board` käyttämään kahta silmukkaa tehdäksesi ruudukon sen sijaan, että kovakoodaisit ne.
+1. Lisää painike, joka antaa sinun järjestää siirrot joko nousevaan tai laskevaan järjestykseen.
+1. Kun joku voittaa, korosta kolme ruutua, jotka aiheuttivat voiton (ja kun kukaan ei voita, näytä viesti tuloksesta olevan tasapeli).
+1. Näytä jokaisen siirron sijainti muodossa (rivi, sarake) siirtohistorian listassa.
 
-Throughout this tutorial, you've touched on React concepts including elements, components, props, and state. Now that you've seen how these concepts work when building a game, check out [Thinking in React](/learn/thinking-in-react) to see how the same React concepts work when build an app's UI.
+Tämän oppaan aikana, olet käsitellyt Reactin käsitteitä, mukaan lukien elementit, komponentit, propsit ja tila. Nyt kun olet nähnyt miten nämä käsitteet toimivat peliä rakentaessa, katso [Thinking in React](/learn/thinking-in-react) nähdäksesi miten samat Reactin käsitteet toimivat kun rakennat sovelluksen käyttöliittymää.

From 3de7791574fde5b92f7f0bb82b754cb4c6f1e23a Mon Sep 17 00:00:00 2001
From: Miro Rauhala <4082806+mirorauhala@users.noreply.github.com>
Date: Tue, 19 Sep 2023 21:19:56 +0300
Subject: [PATCH 24/34] Fixup

---
 src/content/learn/tutorial-tic-tac-toe.md | 60 +++++++++++------------
 1 file changed, 30 insertions(+), 30 deletions(-)

diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md
index e1368660a..9a8a0df9e 100644
--- a/src/content/learn/tutorial-tic-tac-toe.md
+++ b/src/content/learn/tutorial-tic-tac-toe.md
@@ -57,9 +57,9 @@ function Board({ xIsNext, squares, onPlay }) {
   const winner = calculateWinner(squares);
   let status;
   if (winner) {
-    status = 'Winner: ' + winner;
+    status = 'Voittaja: ' + winner;
   } else {
-    status = 'Next player: ' + (xIsNext ? 'X' : 'O');
+    status = 'Seuraava pelaajaa: ' + (xIsNext ? 'X' : 'O');
   }
 
   return (
@@ -103,9 +103,9 @@ export default function Game() {
   const moves = history.map((squares, move) => {
     let description;
     if (move > 0) {
-      description = 'Go to move #' + move;
+      description = 'Siirry liikkeeseen #' + move;
     } else {
-      description = 'Go to game start';
+      description = 'Siirry pelin alkuun';
     }
     return (
       <li key={move}>
@@ -1570,7 +1570,7 @@ function handleClick(i) {
 }
 ```
 
-Antaaksesi pelaajiesi tietää milloin peli on ohi, voit näyttää tekstin kuten "Winner: X" tai "Winner: 0". Tämän tekemiseksi lisäät `status` osion `Board` komponenttiin. Status näyttää voittajan, jos peli on ohi ja jos peli on kesken, näytät kumman pelaajan vuoro on seuraavaksi:
+Antaaksesi pelaajiesi tietää milloin peli on ohi, voit näyttää tekstin kuten "Voittaja: X" tai "Voittaja: 0". Tämän tekemiseksi lisäät `status` osion `Board` komponenttiin. Status näyttää voittajan, jos peli on ohi ja jos peli on kesken, näytät kumman pelaajan vuoro on seuraavaksi:
 
 ```js {3-9,13}
 export default function Board() {
@@ -1578,9 +1578,9 @@ export default function Board() {
   const winner = calculateWinner(squares);
   let status;
   if (winner) {
-    status = "Winner: " + winner;
+    status = "Voittaja: " + winner;
   } else {
-    status = "Next player: " + (xIsNext ? "X" : "O");
+    status = "Seuraava pelaajaa: " + (xIsNext ? "X" : "O");
   }
 
   return (
@@ -1628,9 +1628,9 @@ export default function Board() {
   const winner = calculateWinner(squares);
   let status;
   if (winner) {
-    status = 'Winner: ' + winner;
+    status = 'Voittaja: ' + winner;
   } else {
-    status = 'Next player: ' + (xIsNext ? 'X' : 'O');
+    status = 'Seuraava pelaajaa: ' + (xIsNext ? 'X' : 'O');
   }
 
   return (
@@ -1902,9 +1902,9 @@ function Board({ xIsNext, squares, onPlay }) {
   const winner = calculateWinner(squares);
   let status;
   if (winner) {
-    status = 'Winner: ' + winner;
+    status = 'Voittaja: ' + winner;
   } else {
-    status = 'Next player: ' + (xIsNext ? 'X' : 'O');
+    status = 'Seuraava pelaajaa: ' + (xIsNext ? 'X' : 'O');
   }
 
   return (
@@ -2051,9 +2051,9 @@ export default function Game() {
   const moves = history.map((squares, move) => {
     let description;
     if (move > 0) {
-      description = 'Go to move #' + move;
+      description = 'Siirry liikkeeseen #' + move;
     } else {
-      description = 'Go to game start';
+      description = 'Siirry pelin alkuun';
     }
     return (
       <li>
@@ -2107,9 +2107,9 @@ function Board({ xIsNext, squares, onPlay }) {
   const winner = calculateWinner(squares);
   let status;
   if (winner) {
-    status = 'Winner: ' + winner;
+    status = 'Voittaja: ' + winner;
   } else {
-    status = 'Next player: ' + (xIsNext ? 'X' : 'O');
+    status = 'Seuraava pelaajaa: ' + (xIsNext ? 'X' : 'O');
   }
 
   return (
@@ -2151,9 +2151,9 @@ export default function Game() {
   const moves = history.map((squares, move) => {
     let description;
     if (move > 0) {
-      description = 'Go to move #' + move;
+      description = 'Siirry liikkeeseen #' + move;
     } else {
-      description = 'Go to game start';
+      description = 'Siirry pelin alkuun';
     }
     return (
       <li>
@@ -2335,9 +2335,9 @@ function Board({ xIsNext, squares, onPlay }) {
   const winner = calculateWinner(squares);
   let status;
   if (winner) {
-    status = 'Winner: ' + winner;
+    status = 'Voittaja: ' + winner;
   } else {
-    status = 'Next player: ' + (xIsNext ? 'X' : 'O');
+    status = 'Seuraava pelaajaa: ' + (xIsNext ? 'X' : 'O');
   }
 
   return (
@@ -2379,9 +2379,9 @@ export default function Game() {
   const moves = history.map((squares, move) => {
     let description;
     if (move > 0) {
-      description = 'Go to move #' + move;
+      description = 'Siirry liikkeeseen #' + move;
     } else {
-      description = 'Go to game start';
+      description = 'Siirry pelin alkuun';
     }
     return (
       <li key={move}>
@@ -2556,9 +2556,9 @@ function Board({ xIsNext, squares, onPlay }) {
   const winner = calculateWinner(squares);
   let status;
   if (winner) {
-    status = 'Winner: ' + winner;
+    status = 'Voittaja: ' + winner;
   } else {
-    status = 'Next player: ' + (xIsNext ? 'X' : 'O');
+    status = 'Seuraava pelaajaa: ' + (xIsNext ? 'X' : 'O');
   }
 
   return (
@@ -2604,9 +2604,9 @@ export default function Game() {
   const moves = history.map((squares, move) => {
     let description;
     if (move > 0) {
-      description = 'Go to move #' + move;
+      description = 'Siirry liikkeeseen #' + move;
     } else {
-      description = 'Go to game start';
+      description = 'Siirry pelin alkuun';
     }
     return (
       <li key={move}>
@@ -2766,9 +2766,9 @@ function Board({ xIsNext, squares, onPlay }) {
   const winner = calculateWinner(squares);
   let status;
   if (winner) {
-    status = 'Winner: ' + winner;
+    status = 'Voittaja: ' + winner;
   } else {
-    status = 'Next player: ' + (xIsNext ? 'X' : 'O');
+    status = 'Seuraava pelaajaa: ' + (xIsNext ? 'X' : 'O');
   }
 
   return (
@@ -2812,9 +2812,9 @@ export default function Game() {
   const moves = history.map((squares, move) => {
     let description;
     if (move > 0) {
-      description = 'Go to move #' + move;
+      description = 'Siirry liikkeeseen #' + move;
     } else {
-      description = 'Go to game start';
+      description = 'Siirry pelin alkuun';
     }
     return (
       <li key={move}>
@@ -2911,4 +2911,4 @@ Jos sinulla on ylimääräistä aikaa tai haluat harjoitella uusia React taitoja
 1. Kun joku voittaa, korosta kolme ruutua, jotka aiheuttivat voiton (ja kun kukaan ei voita, näytä viesti tuloksesta olevan tasapeli).
 1. Näytä jokaisen siirron sijainti muodossa (rivi, sarake) siirtohistorian listassa.
 
-Tämän oppaan aikana, olet käsitellyt Reactin käsitteitä, mukaan lukien elementit, komponentit, propsit ja tila. Nyt kun olet nähnyt miten nämä käsitteet toimivat peliä rakentaessa, katso [Thinking in React](/learn/thinking-in-react) nähdäksesi miten samat Reactin käsitteet toimivat kun rakennat sovelluksen käyttöliittymää.
+Tämän oppaan aikana, olet käsitellyt Reactin käsitteitä, mukaan lukien elementit, komponentit, propsit ja tila. Nyt kun olet nähnyt miten nämä käsitteet toimivat peliä rakentaessa, katso [Ajattelu Reactissa](/learn/thinking-in-react) nähdäksesi miten samat Reactin käsitteet toimivat kun rakennat sovelluksen käyttöliittymää.

From 6e5011a53cc84dc625041f101b9a685a2de2a207 Mon Sep 17 00:00:00 2001
From: Miro Rauhala <4082806+mirorauhala@users.noreply.github.com>
Date: Tue, 19 Sep 2023 21:45:52 +0300
Subject: [PATCH 25/34] Translate 'Using TypeScript'

---
 src/content/learn/typescript.md | 166 ++++++++++++++++----------------
 1 file changed, 83 insertions(+), 83 deletions(-)

diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md
index 5695b755f..b18a7a0d4 100644
--- a/src/content/learn/typescript.md
+++ b/src/content/learn/typescript.md
@@ -1,57 +1,58 @@
 ---
-title: Using TypeScript
+title: TypeScriptin käyttäminen
 re: https://github.com/reactjs/react.dev/issues/5960
 ---
 
 <Intro>
 
-TypeScript is a popular way to add type definitions to JavaScript codebases. Out of the box, TypeScript [supports JSX](/learn/writing-markup-with-jsx) and you can get full React Web support by adding [`@types/react`](https://www.npmjs.com/package/@types/react) and [`@types/react-dom`](https://www.npmjs.com/package/@types/react-dom) to your project.
+TypeScript on suosittu tapa lisätä tyyppimääritteitä JavaScript koodiin. TypeScript [tukee JSX:ää](/learn/writing-markup-with-jsx) ja voit saada täyden React Web tuen lisäämällä [`@types/react`](https://www.npmjs.com/package/@types/react) ja [`@types/react-dom`](https://www.npmjs.com/package/@types/react-dom) projektiisi.
 
 </Intro>
 
 <YouWillLearn>
 
-* [TypeScript with React Components](/learn/typescript#typescript-with-react-components)
-* [Examples of typing with hooks](/learn/typescript#example-hooks)
-* [Common types from `@types/react`](/learn/typescript/#useful-types)
-* [Further learning locations](/learn/typescript/#further-learning)
+* [TypeScript React komponenteissa](/learn/typescript#typescript-with-react-components)
+* [Esimerkkejä koodaamisesta hookkien avulla](/learn/typescript#example-hooks)
+* [Yleisiä tyyppejä `@types/react` paketista](/learn/typescript/#useful-types)
+* [Osaamisen laajentaminen](/learn/typescript/#further-learning)
 
 </YouWillLearn>
 
-## Installation {/*installation*/}
+## Asennus {/*installation*/}
 
-All [production-grade React frameworks](https://react-dev-git-fork-orta-typescriptpage-fbopensource.vercel.app/learn/start-a-new-react-project#production-grade-react-frameworks) offer support for using TypeScript. Follow the framework specific guide for installation:
+Kaikki [tuotantokäyttöön tarkoitetut React frameworkit](/learn/start-a-new-react-project#production-grade-react-frameworks) tarjoavat tuen TypeScriptin käyttöön. Seuraa frameworkin omaa asennusohjetta:
 
 - [Next.js](https://nextjs.org/docs/pages/building-your-application/configuring/typescript)
 - [Remix](https://remix.run/docs/en/1.19.2/guides/typescript)
 - [Gatsby](https://www.gatsbyjs.com/docs/how-to/custom-configuration/typescript/)
 - [Expo](https://docs.expo.dev/guides/typescript/)
 
-### Adding TypeScript to an existing React project {/*adding-typescript-to-an-existing-react-project*/}
+### TypeScriptin lisääminen olemassa olevaan React projektiin {/*adding-typescript-to-an-existing-react-project*/}
 
-To install the latest version of React's type definitions:
+Asentaaksesi uusimman version Reactin tyyppimäärittelyistä:
 
 <TerminalBlock>
 npm install @types/react @types/react-dom
 </TerminalBlock>
 
-The following compiler options need to be set in your `tsconfig.json`:
+Seuraavat compiler-asetukset on oltava asetettuna `tsconfig.json` tiedostossasi:
 
-1. `dom` must be included in [`lib`](https://www.typescriptlang.org/tsconfig/#lib) (Note: If no `lib` option is specified, `dom` is included by default).
-1. [`jsx`](https://www.typescriptlang.org/tsconfig/#jsx) must be set to one of the valid options. `preserve` should suffice for most applications.
+1. `dom` täytyy olla sisällytettynä [`lib`](https://www.typescriptlang.org/tsconfig/#lib):ssa (Huomaa: Jos `lib` vaihtoehtoa ei ole määritelty, `dom` sisällytetään oletuksena).
+2. [`jsx`](https://www.typescriptlang.org/tsconfig/#jsx):n täytyy olla yksi sallituista vaihtoehdoista. `preserve` riittää useimmille sovelluksille.
   If you're publishing a library, consult the [`jsx` documentation](https://www.typescriptlang.org/tsconfig/#jsx) on what value to choose.
+  Jos olet julkaisemassa kirjastoa, tutustu [`jsx` dokumentaatioon](https://www.typescriptlang.org/tsconfig/#jsx) mitä arvoa valita.
 
-## TypeScript with React Components {/*typescript-with-react-components*/}
+## TypeScript React komponenteissa {/*typescript-with-react-components*/}
 
 <Note>
 
-Every file containing JSX must use the `.tsx` file extension. This is a TypeScript-specific extension that tells TypeScript that this file contains JSX.
+Jokainen tiedosto joka sisältää JSX:ää täytyy käyttää `.tsx` tiedostopäätettä. Tämä on TypeScriptin oma tiedostopääte joka kertoo TypeScriptille että tämä tiedosto sisältää JSX:ää.
 
 </Note>
 
-Writing TypeScript with React is very similar to writing JavaScript with React. The key difference when working with a component is that you can provide types for your component's props. These types can be used for correctness checking and providing inline documentation in editors.
+TypeScriptin kirjoittaminen Reactin kanssa on hyvin samanlaista kuin JavaScriptin kirjoittaminen Reactin kanssa. Suurin ero on että voit määritellä tyypit komponentin propseille. Nämä tyypit voidaan käyttää oikeellisuuden tarkistamiseen ja sisäisen dokumentaation tarjoamiseen editoreissa.
 
-Taking the [`MyButton` component](/learn#components) from the [Quick Start](/learn) guide, we can add a type describing the `title` for the button:
+[`MyButton` komponentin](/learn#components) ottaminen [Pika-aloitus](/learn) -oppaasta, voimme lisätä tyypin joka kuvaa `title` propin painikkeelle:
 
 <Sandpack>
 
@@ -65,8 +66,8 @@ function MyButton({ title }: { title: string }) {
 export default function MyApp() {
   return (
     <div>
-      <h1>Welcome to my app</h1>
-      <MyButton title="I'm a button" />
+      <h1>Tervetuloa sovellukseeni</h1>
+      <MyButton title="Olen painike" />
     </div>
   );
 }
@@ -80,19 +81,19 @@ export default App = AppTSX;
 
  <Note>
 
-These sandboxes can handle TypeScript code, but they do not run the type-checker. This means you can amend the TypeScript sandboxes to learn, but you won't get any type errors or warnings. To get type-checking, you can use the [TypeScript Playground](https://www.typescriptlang.org/play) or use a more fully-featured online sandbox.
+Nämä hiekkalaatikot tukevat TypeScript koodia, mutta ne eivät aja tyyppitarkistinta. Tämä tarkoittaa että voit muokata TypeScript hiekkalaatikoita oppiaksesi, mutta et saa mitään tyyppivirheitä tai varoituksia. Saadaksesi tyyppitarkistuksen, voit käyttää [TypeScript Playground](https://www.typescriptlang.org/play) tai käyttää enemmän ominaisuuksia sisältävää hiekkalaatikkoa.
 
 </Note>
 
-This inline syntax is the simplest way to provide types for a component, though once you start to have a few fields to describe it can become unwieldy. Instead, you can use an `interface` or `type` to describe the component's props:
+Tämä sisäinen syntaksi on yksinkertaisin tapa määritellä tyypit komponentille, mutta kun sinulla on muutama kenttä kuvattavana, se voi muuttua hankalaksi. Sen sijaan voit käyttää `interface` tai `type` kuvaamaan komponentin propseja:
 
 <Sandpack>
 
 ```tsx App.tsx active
 interface MyButtonProps {
-  /** The text to display inside the button */
+  /** Teksti jota näytetään painikkeen sisällä */
   title: string;
-  /** Whether the button can be interacted with */
+  /** Voiko painiketta käyttää */
   disabled: boolean;
 }
 
@@ -105,8 +106,8 @@ function MyButton({ title, disabled }: MyButtonProps) {
 export default function MyApp() {
   return (
     <div>
-      <h1>Welcome to my app</h1>
-      <MyButton title="I'm a disabled button" disabled={true}/>
+      <h1>Tervetuloa sovellukseeni</h1>
+      <MyButton title="Olen käytöstä poistettu painike" disabled={true}/>
     </div>
   );
 }
@@ -119,32 +120,31 @@ export default App = AppTSX;
 
 </Sandpack>
 
-The type describing your component's props can be as simple or as complex as you need, though they should be an object type described with either a `type` or `interface`. You can learn about how TypeScript describes objects in [Object Types](https://www.typescriptlang.org/docs/handbook/2/objects.html) but you may also be interested in using [Union Types](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#union-types) to describe a prop that can be one of a few different types and the [Creating Types from Types](https://www.typescriptlang.org/docs/handbook/2/types-from-types.html) guide for more advanced use cases.
+Tyyppi joka kuvaa komponentin propseja voi olla yhtä yksinkertainen tai monimutkainen kuin tarvitset, mutta niiden tulisi olla objektityyppi joka on kuvattu joko `type` tai `interface` avulla. Voit oppia kuinka TypeScript kuvaa objekteja [Object Types](https://www.typescriptlang.org/docs/handbook/2/objects.html) -oppaasta, mutta saatat olla kiinnostunut käyttämään [Union Types](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#union-types) kuvaamaan propsia joka voi olla yksi monista eri tyypeistä ja [Creating Types from Types](https://www.typescriptlang.org/docs/handbook/2/types-from-types.html) -opas monimutkaisempiin käyttötapauksiin.
 
+## Hookki-esimerkkejä {/*example-hooks*/}
 
-## Example Hooks {/*example-hooks*/}
+Tyyppimäärittelyt `@types/react` paketissa sisältävät tyypit sisäänrakennetuille hookkeille, joten voit käyttää niitä komponenteissasi ilman lisäasetuksia. Ne on rakennettu ottamaan huomioon koodi jonka kirjoitat komponenttiisi, joten saat [pääteltyjä tyyppejä](https://www.typescriptlang.org/docs/handbook/type-inference.html) usein ja sinun ei pitäisi tarvita käsitellä yksityiskohtia tyypittämisestä.
 
-The type definitions from `@types/react` include types for the built-in hooks, so you can use them in your components without any additional setup. They are built to take into account the code you write in your component, so you will get [inferred types](https://www.typescriptlang.org/docs/handbook/type-inference.html) a lot of the time and ideally do not need to handle the minutiae of providing the types. 
-
-However, we can look at a few examples of how to provide types for hooks.
+Kuitenkin, voimme katsoa muutamia esimerkkejä kuinka tarjota tyyppejä hookkeille.
 
 ### `useState` {/*typing-usestate*/}
 
-The [`useState` hook](/reference/react/useState) will re-use the value passed in as the initial state to determine what the type of the value should be. For example:
+[`useState` hookki](/reference/react/useState) käyttää uuddelleen arvoa joka annetaan alustavaksi tilaksi määrittääkseen minkä tyyppinen arvo on kyseessä. Esimerkiksi:
 
 ```ts
-// Infer the type as "boolean"
+// Päättele arvoksi "boolean":ksi
 const [enabled, setEnabled] = useState(false);
 ```
 
-Will assign the type of `boolean` to `enabled`, and `setEnabled` will be a function accepting either a `boolean` argument, or a function that returns a `boolean`. If you want to explicitly provide a type for the state, you can do so by providing a type argument to the `useState` call:
+Päättelee `enabled` tyypiksi `boolean` ja `setEnabled` on funktio joka hyväksyy joko `boolean` argumentin tai funktion joka palauttaa `boolean` arvon. Jos haluat määrittää tyypin tilalle, voit tehdä sen antamalla tyypin argumentin `useState` kutsulle:
 
 ```ts 
-// Explicitly set the type to "boolean"
+// Eksplisiittisesti aseta tyyppi "boolean":ksi
 const [enabled, setEnabled] = useState<boolean>(false);
 ```
 
-This isn't very useful in this case, but a common case where you may want to provide a type is when you have a union type. For example, `status` here can be one of a few different strings:
+Tämä ei ole kovin hyödyllistä tässä tapauksessa, mutta yleinen tapaus jossa haluat määrittää tyypin on kun sinulla on union tyyppi. Esimerkiksi, `status` voi olla yksi monista eri merkkijonoista:
 
 ```ts
 type Status = "idle" | "loading" | "success" | "error";
@@ -152,7 +152,7 @@ type Status = "idle" | "loading" | "success" | "error";
 const [status, setStatus] = useState<Status>("idle");
 ```
 
-Or, as recommended in [Principles for structuring state](/learn/choosing-the-state-structure#principles-for-structuring-state), you can group related state as an object and describe the different possibilities via object types:
+Tai, kuten suositellaan [Tilarakenteiden periaatteissa](/learn/choosing-the-state-structure#principles-for-structuring-state), voit ryhmitellä liittyvän tilan objektiksi ja kuvailla eri mahdollisuudet objektityypeillä:
 
 ```ts
 type RequestState =
@@ -166,7 +166,7 @@ const [requestState, setRequestState] = useState<RequestState>({ status: 'idle'
 
 ### `useReducer` {/*typing-usereducer*/}
 
-The [`useReducer` hook](/reference/react/useReducer) is a more complex hook that takes a reducer function and an initial state. The types for the reducer function are inferred from the initial state. You can optionally provide a type argument to the `useReducer` call to provide a type for the state, but it is often better to set the type on the initial state instead:
+[`useReducer` hookki](/reference/react/useReducer) on monimutkaisempi hookki joka ottaa reduktorifunktion ja alustavan tilan. Tyypit reducer funktiolle päätellään alustavasta tilasta. Voit valinnaisesti antaa tyypin argumentin `useReducer` kutsulle antaaksesi tyypin tilalle, mutta on usein parempi asettaa tyyppi alustavalle tilalle:
 
 <Sandpack>
 
@@ -202,11 +202,11 @@ export default function App() {
 
   return (
     <div>
-      <h1>Welcome to my counter</h1>
+      <h1>Tervetuloa laskuriini</h1>
 
-      <p>Count: {state.count}</p>
-      <button onClick={addFive}>Add 5</button>
-      <button onClick={reset}>Reset</button>
+      <p>Laskuri: {state.count}</p>
+      <button onClick={addFive}>Lisää 5</button>
+      <button onClick={reset}>Nollaa</button>
     </div>
   );
 }
@@ -221,14 +221,14 @@ export default App = AppTSX;
 </Sandpack>
 
 
-We are using TypeScript in a few key places:
+Käytämme TypeScriptiä muutamassa keskeisessä paikassa:
 
- - `interface State` describes the shape of the reducer's state.
- - `type CounterAction` describes the different actions which can be dispatched to the reducer.
- - `const initialState: State` provides a type for the initial state, and also the type which is used by `useReducer` by default.
- - `stateReducer(state: State, action: CounterAction): State` sets the types for the reducer function's arguments and return value.
+ - `interface State` kuvaa reduktorin tilan muodon.
+ - `type CounterAction` kuvaa eri toimintoja jotka voidaan lähettää reduktorille.
+ - `const initialState: State` tarjoaa tyypin alustavalle tilalle, ja myös tyypin jota `useReducer` käyttää oletuksena.
+ - `stateReducer(state: State, action: CounterAction): State` asettaa tyypit reduktorifunktion argumenteille ja palautusarvolle.
 
-A more explicit alternative to setting the type on `initialState` is to provide a type argument to `useReducer`:
+Eksplisiittisempi vaihtoehto tyypin asettamiseen `initialState`:lle on antaa tyyppi argumentti `useReducer`:lle:
 
 ```ts
 import { stateReducer, State } from './your-reducer-implementation';
@@ -242,9 +242,9 @@ export default function App() {
 
 ### `useContext` {/*typing-usecontext*/}
 
-The [`useContext` hook](/reference/react/useContext) is a technique for passing data down the component tree without having to pass props through components. It is used by creating a provider component and often by creating a hook to consume the value in a child component.
+[`useContext` hookki](/reference/react/useContext) on tekniikka datan välittämiseen komponenttipuun läpi ilman että tarvitsee välittää propseja komponenttien läpi. Sitä käytetään luomalla tarjoaja komponentti ja usein luomalla hookki arvon käyttöön lapsikomponentissa.
 
-The type of the value provided by the context is inferred from the value passed to the `createContext` call:
+Kontekstin tarjoaman arvon tyyppi päätellään arvosta joka annetaan `createContext` kutsulle:
 
 <Sandpack>
 
@@ -271,7 +271,7 @@ function MyComponent() {
 
   return (
     <div>
-      <p>Current theme: {theme}</p>
+      <p>Nykyinen teema: {theme}</p>
     </div>
   )
 }
@@ -284,22 +284,22 @@ export default App = AppTSX;
 
 </Sandpack>
 
-This technique works when you have an default value which makes sense - but there are occasionally cases when you do not, and in those cases `null` can feel reasonable as a default value. However, to allow the type-system to understand your code, you need to explicitly set `ContextShape | null` on the `createContext`. 
+Tämä tekniikka toimii kun sinulla on oletusarvo joka on järkevä - mutta on tapauksia jolloin sitä ei ole, ja näissä tapauksissa `null` voi tuntua järkevältä oletusarvolta. Kuitenkin, jotta tyyppijärjestelmä ymmärtäisi koodisi, sinun täytyy eksplisiittisesti asettaa `ContextShape | null` `createContext`:lle.
 
-This causes the issue that you need to eliminate the `| null` in the type for context consumers. Our recommendation is to have the hook do a runtime check for it's existence and throw an error when not present:
+Tämä aiheuttaa ongelman jossa sinun täytyy eliminoida `| null` tyyppi kontekstin kuluttajilta. Suosituksemme on että hookki tekee runtime tarkistuksen sen olemassaolosta ja heittää virheen kun sitä ei ole:
 
 ```js {5, 16-20}
 import { createContext, useContext, useState, useMemo } from 'react';
 
-// This is a simpler example, but you can imagine a more complex object here
+// Tämä on yksinkertaisempi esimerkki, mutta voit kuvitella monimutkaisemman olion tässä
 type ComplexObject = {
   kind: string
 };
 
-// The context is created with `| null` in the type, to accurately reflect the default value.
+// Konteksti luodaan `| null` tyypillä, jotta oletusarvo heijastuu tarkasti.
 const Context = createContext<ComplexObject | null>(null);
 
-// The `| null` will be removed via the check in the hook.
+// `| null` tullaan poistamaan tarkistuksen kautta hookissa.
 const useGetComplexObject = () => {
   const object = useContext(Context);
   if (!object) { throw new Error("useGetComplexObject must be used within a Provider") }
@@ -321,7 +321,7 @@ function MyComponent() {
 
   return (
     <div>
-      <p>Current object: {object.kind}</p>
+      <p>Nykyinen olio: {object.kind}</p>
     </div>
   )
 }
@@ -329,17 +329,17 @@ function MyComponent() {
 
 ### `useMemo` {/*typing-usememo*/}
 
-The [`useMemo`](/reference/react/useMemo) hooks will create/re-access a memorized value from a function call, re-running the function only when dependencies passed as the 2nd parameter are changed. The result of calling the hook is inferred from the return value from the function in the first parameter. You can be more explicit by providing a type argument to the hook.
+[`useMemo`](/reference/react/useMemo) hookki luo/uudelleen käyttää muistettua arvoa funktiokutsusta, ajamalla funktiota uudelleen vain kun riippuvuudet jotka on annettu toisena parametrina muuttuvat. Kutsun tulosta päätellään palautusarvosta funktiossa ensimmäisenä parametrina. Voit olla eksplisiittisempi antamalla tyypin argumentin hookille.
 
 ```ts
-// The type of visibleTodos is inferred from the return value of filterTodos
+// visibleTodos:n tyyppi päätellään filterTodos:n palautusarvosta
 const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
 ```
 
 
 ### `useCallback` {/*typing-usecallback*/}
 
-The [`useCallback`](/reference/react/useCallback) provide a stable reference to a function as long as the dependencies passed into the second parameter are the same. Like `useMemo`, the function's type is inferred from the return value of the function in the first parameter, and you can be more explicit by providing a type argument to the hook.
+[`useCallback`](/reference/react/useCallback) tarjoaa vakaan viitteen funktioon niin kauan kun riippuvuudet jotka on annettu toisena parametrina pysyvät samana. Kuten `useMemo`, funktion tyyppi päätellään funktiosta palautusarvona ensimmäisenä parametrina, ja voit olla eksplisiittisempi antamalla tyypin argumentin hookille.
 
 
 ```ts
@@ -348,9 +348,9 @@ const handleClick = useCallback(() => {
 }, [todos]);
 ```
 
-When working in TypeScript strict mode `useCallback` requires adding types for the parameters in your callback. This is because the type of the callback is inferred from the return value of the function, and without parameters the type cannot be fully understood.
+Kun työskentelet TypeScriptin strict-moodissa `useCallback` vaatii lisäämään tyypit parametreille callbackissasi. Tämä johtuu siitä että callbackin tyyppi päätellään funktion palautusarvosta, ja ilman parametreja tyyppiä ei voida ymmärtää täysin.
 
-Depending on your code-style preferences, you could use the `*EventHandler` functions from the React types to provide the type for the event handler at the same time as defining the callback: 
+Riippuen koodityylistäsi, voit käyttää `*EventHandler` funktioita Reactin tyypeistä tarjotaksesi tyypin tapahtumankäsittelijälle samaan aikaan kun määrittelet callbackin:
 
 ```ts
 import { useState, useCallback } from 'react';
@@ -371,13 +371,13 @@ export default function Form() {
 }
 ```
 
-## Useful Types {/*useful-types*/}
+## Hyödyllisiä tyyppejä {/*useful-types*/}
 
-There is quite an expansive set of types which come from the `@types/react` package, it is worth a read when you feel comfortable with how React and TypeScript interact. You can find them [in React's folder in DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts). We will cover a few of the more common types here.
+`@types/react` paketissa on melko laaja joukko tyyppejä, on hyvä lukea ne kun tunnet olosi mukavaksi kuinka React ja TypeScript toimivat yhdessä. Voit löytää ne [Reactin kansiossa DefinitelyTypedissä](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts). Käydään läpi muutamia yleisimpiä tyyppejä tässä.
 
-### DOM Events {/*typing-dom-events*/}
+### DOM tapahtumat {/*typing-dom-events*/}
 
-When working with DOM events in React, the type of the event can often be inferred from the event handler. However, when you want to extract a function to be passed to an event handler, you will need to explicitly set the type of the event.
+Kun työskentelet DOM tapahtumien kanssa Reactissa, tapahtuman tyyppi voidaan usein päätellä tapahtumankäsittelijästä. Kuitenkin, kun haluat eristää funktion joka annetaan tapahtumankäsittelijälle, sinun täytyy eksplisiittisesti asettaa tapahtuman tyyppi.
 
 <Sandpack>
 
@@ -394,7 +394,7 @@ export default function Form() {
   return (
     <>
       <input value={value} onChange={handleChange} />
-      <p>Value: {value}</p>
+      <p>Arvo: {value}</p>
     </>
   );
 }
@@ -407,15 +407,15 @@ export default App = AppTSX;
 
 </Sandpack>
 
-There are many types of events provided in the React types - the full list can be found [here](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/b580df54c0819ec9df62b0835a315dd48b8594a9/types/react/index.d.ts#L1247C1-L1373) which is based on the [most popular events from the DOM](https://developer.mozilla.org/en-US/docs/Web/Events).
+On monia eri tapahtumia, joita Reactin tyypit tarjoaa - täydellinen lista löytyy [täältä](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/b580df54c0819ec9df62b0835a315dd48b8594a9/types/react/index.d.ts#L1247C1-L1373) joka perustuu [suosituimpiin tapahtumiin DOM:issa](https://developer.mozilla.org/en-US/docs/Web/Events).
 
-When determining the type you are looking for you can first look at the hover information for the event handler you are using, which will show the type of the event.
+Kun etsit tyyppiä, voit ensin katsoa hover tiedot tapahtumankäsittelijälle jota käytät, joka näyttää tapahtuman tyypin.
 
-If you need to use an event that is not included in this list, you can use the `React.SyntheticEvent` type, which is the base type for all events.
+Jos sinun täytyy käyttää tapahtumaa jota ei ole tässä listassa, voit käyttää `React.SyntheticEvent` tyyppiä, joka on kaikkien tapahtumien perustyypi.
 
 ### Children {/*typing-children*/}
 
-There are two common paths to describing the children of a component. The first is to use the `React.ReactNode` type, which is a union of all the possible types that can be passed as children in JSX:
+On kaksi yleistä tapaa kuvailla komponentin lapsia. Ensimmäinen on käyttää `React.ReactNode` tyyppiä, joka on unioni kaikista mahdollisista tyypeistä jotka voidaan antaa lapsina JSX:ssä:
 
 ```ts
 interface ModalRendererProps {
@@ -424,7 +424,7 @@ interface ModalRendererProps {
 }
 ```
 
-This is a very broad definition of children. The second is to use the `React.ReactElement` type, which is only JSX elements and not JavaScript primitives like strings or numbers:
+Tämä on hyvin laaja määritelmä lapsille. Toinen tapa on käyttää `React.ReactElement` tyyppiä, joka on vain JSX elementtejä eikä JavaScript primitiivejä kuten merkkijonoja tai numeroita:
 
 ```ts
 interface ModalRendererProps {
@@ -433,13 +433,13 @@ interface ModalRendererProps {
 }
 ```
 
-Note, that you cannot use TypeScript to describe that the children are a certain type of JSX elements, so you cannot use the type-system to describe a component which only accepts `<li>` children. 
+Huomaa, että et voi käyttää TypeScriptiä kuvaamaan että lapset ovat tietyn tyyppisiä JSX elementtejä, joten et voi käyttää tyyppijärjestelmää kuvaamaan komponenttia joka hyväksyy vain `<li>` lapsia.
 
-You can see all an example of both `React.ReactNode` and `React.ReactElement` with the type-checker in [this TypeScript playground](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgIilQ3wChSB6CxYmAOmXRgDkIATJOdNJMGAZzgwAFpxAR+8YADswAVwGkZMJFEzpOjDKw4AFHGEEBvUnDhphwADZsi0gFw0mDWjqQBuUgF9yaCNMlENzgAXjgACjADfkctFnYkfQhDAEpQgD44AB42YAA3dKMo5P46C2tbJGkvLIpcgt9-QLi3AEEwMFCItJDMrPTTbIQ3dKywdIB5aU4kKyQQKpha8drhhIGzLLWODbNs3b3s8YAxKBQAcwXpAThMaGWDvbH0gFloGbmrgQfBzYpd1YjQZbEYARkB6zMwO2SHSAAlZlYIBCdtCRkZpHIrFYahQYQD8UYYFA5EhcfjyGYqHAXnJAsIUHlOOUbHYhMIIHJzsI0Qk4P9SLUBuRqXEXEwAKKfRZcNA8PiCfxWACecAAUgBlAAacFm80W-CU11U6h4TgwUv11yShjgJjMLMqDnN9Dilq+nh8pD8AXgCHdMrCkWisVoAet0R6fXqhWKhjKllZVVxMcavpd4Zg7U6Qaj+2hmdG4zeRF10uu-Aeq0LBfLMEe-V+T2L7zLVu+FBWLdLeq+lc7DYFf39deFVOotMCACNOCh1dq219a+30uC8YWoZsRyuEdjkevR8uvoVMdjyTWt4WiSSydXD4NqZP4AymeZE072ZzuUeZQKheQgA).
+Näet esimerkin sekä `React.ReactNode`:sta että `React.ReactElement`:sta tyyppitarkistuksella [tässä TypeScript hiekkalaatikossa](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgIilQ3wChSB6CxYmAOmXRgDkIATJOdNJMGAZzgwAFpxAR+8YADswAVwGkZMJFEzpOjDKw4AFHGEEBvUnDhphwADZsi0gFw0mDWjqQBuUgF9yaCNMlENzgAXjgACjADfkctFnYkfQhDAEpQgD44AB42YAA3dKMo5P46C2tbJGkvLIpcgt9-QLi3AEEwMFCItJDMrPTTbIQ3dKywdIB5aU4kKyQQKpha8drhhIGzLLWODbNs3b3s8YAxKBQAcwXpAThMaGWDvbH0gFloGbmrgQfBzYpd1YjQZbEYARkB6zMwO2SHSAAlZlYIBCdtCRkZpHIrFYahQYQD8UYYFA5EhcfjyGYqHAXnJAsIUHlOOUbHYhMIIHJzsI0Qk4P9SLUBuRqXEXEwAKKfRZcNA8PiCfxWACecAAUgBlAAacFm80W-CU11U6h4TgwUv11yShjgJjMLMqDnN9Dilq+nh8pD8AXgCHdMrCkWisVoAet0R6fXqhWKhjKllZVVxMcavpd4Zg7U6Qaj+2hmdG4zeRF10uu-Aeq0LBfLMEe-V+T2L7zLVu+FBWLdLeq+lc7DYFf39deFVOotMCACNOCh1dq219a+30uC8YWoZsRyuEdjkevR8uvoVMdjyTWt4WiSSydXD4NqZP4AymeZE072ZzuUeZQKheQgA).
 
-### Style Props {/*typing-style-props*/}
+### Tyylipropsit {/*typing-style-props*/}
 
-When using inline styles in React, you can use `React.CSSProperties` to describe the object passed to the `style` prop. This type is a union of all the possible CSS properties, and is a good way to ensure you are passing valid CSS properties to the `style` prop, and to get auto-complete in your editor.
+Kun käytät inline-tyylejä Reactissa, voit käyttää `React.CSSProperties` kuvaamaan objektia joka annetaan `style` propille. Tämä tyyppi on unioni kaikista mahdollisista CSS ominaisuuksista, ja on hyvä tapa varmistaa että annat oikeellisia CSS ominaisuuksia `style` propille, ja saadaksesi automaattisen täydennyksen editoriisi.
 
 ```ts
 interface MyComponentProps {
@@ -447,17 +447,17 @@ interface MyComponentProps {
 }
 ```
 
-## Further learning {/*further-learning*/}
+## Osaamisen laajentaminen {/*further-learning*/}
 
-This guide has covered the basics of using TypeScript with React, but there is a lot more to learn.
-Individual API pages on the docs may contain more in-depth documentation on how to use them with TypeScript.
+Tämä opas on käsitellyt TypeScriptin käyttöä Reactin kanssa, mutta on paljon enemmän opittavaa.
+Yksittäiset API sivut dokumentaatiossa voivat sisältää syvällisempää dokumentaatiota kuinka käyttää niitä TypeScriptin kanssa.
 
-We recommend the following resources:
+Suosittelemme seuraavia resursseja:
 
- - [The TypeScript handbook](https://www.typescriptlang.org/docs/handbook/) is the official documentation for TypeScript, and covers most key language features.
+ - [The TypeScript handbook](https://www.typescriptlang.org/docs/handbook/) on virallinen dokumentaatio TypeScriptille, ja kattaa suurimman osan tärkeimmistä ominaisuuksista.
 
- - [The TypeScript release notes](https://devblogs.microsoft.com/typescript/) covers a each new features in-depth.
+ - [The TypeScript release notes](https://devblogs.microsoft.com/typescript/) kattaa jokaisen uuden ominaisuuden syvällisesti.
 
- - [React TypeScript Cheatsheet](https://react-typescript-cheatsheet.netlify.app/) is a community-maintained cheatsheet for using TypeScript with React, covering a lot of useful edge cases and providing more breadth than this document.
+ - [React TypeScript Cheatsheet](https://react-typescript-cheatsheet.netlify.app/) on yhteisön ylläpitämä lunttilappu TypeScriptin käyttöön Reactin kanssa, kattaa paljon hyödyllisiä reunoja ja tarjoaa enemmän syvyyttä kuin tämä dokumentti.
 
- - [TypeScript Community Discord](https://discord.com/invite/typescript) is a great place to ask questions and get help with TypeScript and React issues.
\ No newline at end of file
+ - [TypeScript Community Discord](https://discord.com/invite/typescript) on hyvä paikka kysyä kysymyksiä ja saada apua TypeScriptin ja Reactin ongelmiin.
\ No newline at end of file

From 9852a76e15bf6831815e5b308bd91350449feff7 Mon Sep 17 00:00:00 2001
From: Miro Rauhala <4082806+mirorauhala@users.noreply.github.com>
Date: Wed, 20 Sep 2023 19:11:56 +0300
Subject: [PATCH 26/34] Translate sidebar

---
 src/sidebarLearn.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/sidebarLearn.json b/src/sidebarLearn.json
index 94607e22c..0bfc9f2e5 100644
--- a/src/sidebarLearn.json
+++ b/src/sidebarLearn.json
@@ -11,7 +11,7 @@
       "path": "/learn",
       "routes": [
         {
-          "title": "Tutorial: Tic-Tac-Toe",
+          "title": "Opas: Ristinolla",
           "path": "/learn/tutorial-tic-tac-toe"
         },
         {
@@ -37,7 +37,7 @@
           "path": "/learn/editor-setup"
         },
         {
-          "title": "Using TypeScript",
+          "title": "TypeScript käyttäminen",
           "path": "/learn/typescript"
         },
         {

From 6f5807cb5285567a4c649a4ee25063a8e50c21a7 Mon Sep 17 00:00:00 2001
From: Miro Rauhala <4082806+mirorauhala@users.noreply.github.com>
Date: Wed, 20 Sep 2023 19:42:55 +0300
Subject: [PATCH 27/34] Translate 'use client'

---
 src/content/reference/react/use-client.md | 34 +++++++++++------------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/content/reference/react/use-client.md b/src/content/reference/react/use-client.md
index d04e98d23..8d4916e38 100644
--- a/src/content/reference/react/use-client.md
+++ b/src/content/reference/react/use-client.md
@@ -5,13 +5,13 @@ canary: true
 
 <Canary>
 
-`'use client'` is needed only if you're [using React Server Components](/learn/start-a-new-react-project#bleeding-edge-react-frameworks) or building a library compatible with them.
+`'use client'` tavitaan vain jos [käytät Reactin palvelinkomponentteja](/learn/start-a-new-react-project#bleeding-edge-react-frameworks) tai rakennat niiden kanssa yhteensopivia kirjastoja.
 </Canary>
 
 
 <Intro>
 
-`'use client'` marks source files whose components execute on the client.
+`'use client'` merkitsee tiedostoja, joiden komponentit suoritetaan asiakaspuolella.
 
 </Intro>
 
@@ -23,7 +23,7 @@ canary: true
 
 ### `'use client'` {/*use-client*/}
 
-Add `'use client';` at the very top of a file to mark that the file (including any child components it uses) executes on the client, regardless of where it's imported.
+Lisää `'use client';` tiedoston alkuun merkitsemään, että tiedosto (mukaan lukien kaikki sen käyttämät alikomponentit) suoritetaan asiakaspuolella, riippumatta siitä, missä se on tuotu.
 
 ```js
 'use client';
@@ -34,26 +34,26 @@ export default function RichTextEditor(props) {
   // ...
 ```
 
-When a file marked `'use client'` is imported from a server component, [compatible bundlers](/learn/start-a-new-react-project#bleeding-edge-react-frameworks) will treat the import as the "cut-off point" between server-only code and client code. Components at or below this point in the module graph can use client-only React features like [`useState`](/reference/react/useState).
+Kun `'use client'`:lla merkitty tiedosto tuodaan palvelinkomponentista, [yhteensopivat paketinhallintajärjestelmät](/learn/start-a-new-react-project#bleeding-edge-react-frameworks) käsittelevät tuonnin "katkaisupisteenä" palvelinpuolen ja asiakaspuolen koodin välillä. Tästä pisteestä alaspäin olevat komponentit voivat käyttää vain asiakaspuolen React-ominaisuuksia, kuten [`useState`](/reference/react/useState).
 
 #### Rajoitukset {/*caveats*/}
 
-* It's not necessary to add `'use client'` to every file that uses client-only React features, only the files that are imported from server component files. `'use client'` denotes the _boundary_ between server-only and client code; any components further down the tree will automatically be executed on the client. In order to be rendered from server components, components exported from `'use client'` files must have serializable props.
-* When a `'use client'` file is imported from a server file, the imported values can be rendered as a React component or passed via props to a client component. Any other use will throw an exception.
-* When a `'use client'` file is imported from another client file, the directive has no effect. This allows you to write client-only components that are simultaneously usable from server and client components.
-* All the code in `'use client'` file as well as any modules it imports (directly or indirectly) will become a part of the client module graph and must be sent to and executed by the client in order to be rendered by the browser. To reduce client bundle size and take full advantage of the server, move state (and the `'use client'` directives) lower in the tree when possible, and pass rendered server components [as children](/learn/passing-props-to-a-component#passing-jsx-as-children) to client components.
-* Because props are serialized across the server–client boundary, note that the placement of these directives can affect the amount of data sent to the client; avoid data structures that are larger than necessary.
-* Components like a `<MarkdownRenderer>` that use neither server-only nor client-only features should generally not be marked with `'use client'`. That way, they can render exclusively on the server when used from a server component, but they'll be added to the client bundle when used from a client component.
-* Libraries published to npm should include `'use client'` on exported React components that can be rendered with serializable props that use client-only React features, to allow those components to be imported and rendered by server components. Otherwise, users will need to wrap library components in their own `'use client'` files which can be cumbersome and prevents the library from moving logic to the server later. When publishing prebundled files to npm, ensure that `'use client'` source files end up in a bundle marked with `'use client'`, separate from any bundle containing exports that can be used directly on the server.
-* Client components will still run as part of server-side rendering (SSR) or build-time static site generation (SSG), which act as clients to transform React components' initial render output to HTML that can be rendered before JavaScript bundles are downloaded. But they can't use server-only features like reading directly from a database.
-* Directives like `'use client'` must be at the very beginning of a file, above any imports or other code (comments above directives are OK). They must be written with single or double quotes, not backticks. (The `'use xyz'` directive format somewhat resembles the `useXyz()` Hook naming convention, but the similarity is coincidental.)
+* `'use client'`:a ei ole tarpeen lisätä jokaiseen tiedostoon, joka käyttää asiakaspuolen React-ominaisuuksia, ainoastaan tiedostoihin, jotka tuodaan palvelinkomponenttitiedostoissa. `'use client'` merkitsee palvelin- ja asiakaspuolen koodin välistä _rajaa_; kaikki komponentit, jotka ovat alempana puussa, suoritetaan automaattisesti asiakaspuolella. Jotta niitä voitaisiin renderöidä palvelinkomponenteista, `'use client'`-tiedostoista tuoduilla komponenteilla on oltava serialisoitavat propsit.
+* Kun `'use client'`-tiedosto tuodaan palvelintiedostosta, tuodut arvot voidaan renderöidä React-komponenttina tai välittää propsina asiakaspuolen komponentille. Muu käyttö heittää poikkeuksen.
+* Kun `'use client'` tiedosto tuodaan toisesta asiakaspuolen tiedostosta, direktiivillä ei ole vaikutusta. Tämä mahdollistaa asiakaspuolen komponenttien kirjoittamisen, jotka ovat samanaikaisesti käytettävissä palvelin- ja asiakaspuolen komponenteista.
+* Kaikki koodi `'use client'` tiedostossa ja kaikki moduulit, joita se tukee (suoraan tai epäsuorasti), tulevat osaksi asiakaspuolen moduuligraafia ja ne on lähetettävä ja suoritettava asiakkaalla, jotta ne voidaan renderöidä selaimessa. Asiakaspuolen pakettikokojen pienentämiseksi ja palvelimen täyden potentiaalin hyödyntämiseksi siirrä tila (ja `'use client'`-direktiivit) mahdollisuuksien mukaan alemmas puussa ja välitä renderöidyt palvelinkomponentit [lapsina](/learn/passing-props-to-a-component#passing-jsx-as-children) asiakaspuolen komponenteille.
+* Koska propsit serialisoidaan palvelin-asiakaspuolen rajapinnan yli, huomaa, että näiden direktiivien sijoittelu voi vaikuttaa asiakkaalle lähetettävän datan määrään; vältä tarpeettoman suuria datarakenteita.
+* Komponentit kuten `<MarkdownRenderer>`, jotka eivät käytä palvelin- tai asiakaspuolen ominaisuuksia, eivät yleensä tarvitse `'use client'`-merkintää. Tällöin ne voidaan renderöidä yksinomaan palvelimella, kun niitä käytetään palvelinkomponentista, mutta ne lisätään asiakaspuolen pakettiin, kun niitä käytetään asiakaspuolen komponentista.
+* npm:ään julkaistujen kirjastojen tulisi sisältää `'use client'`-merkintä niille React-komponenteille, jotka voidaan renderöidä serialisoitavilla propsilla, jotka käyttävät vain asiakaspuolen React-ominaisuuksia, jotta nämä komponentit voidaan tuoda ja renderöidä palvelinkomponenteista. Muuten käyttäjien on käärittävä kirjaston komponentit omiin `'use client'`-tiedostoihinsa, mikä voi olla hankalaa ja estää kirjastoa siirtämästä logiikkaa palvelimelle myöhemmin. Kun julkaiset esikäännetyt tiedostot npm:ään, varmista, että `'use client'`-lähdetiedostot päätyvät bundleen, joka on merkitty `'use client'`:lla, erillään mistään bundlesta, joka sisältää suoraan palvelimella käytettäviä exportteja.
+* Asiakaspuolen komponentit suoritetaan silti osana palvelinpuolen renderöintiä (SSR) tai build-vaiheen staattisen sivun generointia (SSG), joka toimii asiakkaana muuttaakseen React-komponenttien alustavan renderöinnin HTML:ksi, joka voidaan renderöidä ennen kuin JavaScript-paketit on ladattu. Mutta ne eivät voi käyttää palvelinpuolen ominaisuuksia, kuten tietokannasta lukemista.
+* Direktiivit kuten `'use client'` on oltava tiedoston alussa, ennen kaikkia tuontilausekkeita tai muuta koodia (kommentit direktiivien yläpuolella on OK). Ne on kirjoitettava yksittäisillä tai kaksinkertaisilla lainausmerkeillä, ei gravismerkeillä. (Direktiivien muoto `'use xyz'` muistuttaa jonkin verran `useXyz()`-Hookin nimeämiskäytäntöä, mutta samankaltaisuus on sattumanvaraista.)
 
 ## Käyttö {/*usage*/}
 
 <Wip>
-This section is a work in progress. 
+Tämä osio on kesken.
 
-This API can be used in any framework that supports React Server Components. You may find additional documentation from them.
-* [Next.js documentation](https://nextjs.org/docs/getting-started/react-essentials)
-* More coming soon
+Tätä rajapintaa voidaan käyttää missä tahansa kehyksessä, joka tukee Reactin palvelinkomponentteja. Lisätietoja löytyy niiden dokumentaatiosta.
+* [Next.js dokumentaatio](https://nextjs.org/docs/getting-started/react-essentials)
+* Lisää tulossa pian
 </Wip>
\ No newline at end of file

From e96a783fb6edf1504ffa441ede56d0db77017a6e Mon Sep 17 00:00:00 2001
From: Miro Rauhala <4082806+mirorauhala@users.noreply.github.com>
Date: Wed, 20 Sep 2023 19:53:55 +0300
Subject: [PATCH 28/34] Fix synx

---
 src/content/learn/preserving-and-resetting-state.md | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/content/learn/preserving-and-resetting-state.md b/src/content/learn/preserving-and-resetting-state.md
index 022834e0c..e92cb096d 100644
--- a/src/content/learn/preserving-and-resetting-state.md
+++ b/src/content/learn/preserving-and-resetting-state.md
@@ -932,11 +932,7 @@ Painetaan "Seuraava pelaaja" uudelleen
 
 </DiagramGroup>
 
-<<<<<<< HEAD
-Kunkin `Counter`:n tila tuhotaan joka kerta kun sen poistetaan DOM:sta. Tämän takia ne nollautuvat joka kerta kun painat painiketta.
-=======
-Each `Counter`'s state gets destroyed each time it's removed from the DOM. This is why they reset every time you click the button.
->>>>>>> 5219d736a7c181a830f7646e616eb97774b43272
+Kunkin `Counter`:n tila tuhotaan joka kerta kun se poistetaan DOM:sta. Tämän takia ne nollautuvat joka kerta kun painat painiketta.
 
 Tämä ratkaisu on kätevä, kun sinulla on vain muutamia riippumattomia komponentteja, jotka renderöidään samassa paikassa. Tässä esimerkissä sinulla on vain kaksi, joten ei ole hankalaa renderöidä molemmat erikseen JSX:ssä.
 

From 22af43d08c32e66d2d9c55acbb831d027c9ca8da Mon Sep 17 00:00:00 2001
From: Miro Rauhala <4082806+mirorauhala@users.noreply.github.com>
Date: Wed, 20 Sep 2023 20:39:05 +0300
Subject: [PATCH 29/34] Translate 'use server'

---
 src/content/reference/react/use-server.md | 26 +++++++++++------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/content/reference/react/use-server.md b/src/content/reference/react/use-server.md
index f332fb726..807e67aa3 100644
--- a/src/content/reference/react/use-server.md
+++ b/src/content/reference/react/use-server.md
@@ -5,14 +5,14 @@ canary: true
 
 <Canary>
 
-`'use server'` is needed only if you're [using React Server Components](/learn/start-a-new-react-project#bleeding-edge-react-frameworks) or building a library compatible with them.
+`'use client'` tavitaan vain jos [käytät Reactin palvelinkomponentteja](/learn/start-a-new-react-project#bleeding-edge-react-frameworks) tai rakennat niiden kanssa yhteensopivia kirjastoja.
 
 </Canary>
 
 
 <Intro>
 
-`'use server'` marks server-side functions that can be called from client-side code.
+`'use server'` merkitsee palvelinpuolen funktioita, joita voidaan kutsua asiakaspuolen koodista.
 
 </Intro>
 
@@ -24,7 +24,7 @@ canary: true
 
 ### `'use server'` {/*use-server*/}
 
-Add `'use server';` at the very top of an async function to mark that the function can be executed by the client.
+Lisää `'use server';` async funktion alkuun merkitsemään että funktiota voidaan kutsua asiakaspuolelta.
 
 ```js
 async function addToCart(data) {
@@ -35,23 +35,23 @@ async function addToCart(data) {
 // <ProductDetailPage addToCart={addToCart} />
 ```
 
-This function can be passed to the client. When called on the client, it will make a network request to the server that includes a serialized copy of any arguments passed. If the server function returns a value, that value will be serialized and returned to the client.
+Tämä funktio voidaan välittää asiakkaalle. Kun sitä kutsutaan asiakaspuolella, se tekee verkkopyynnön palvelimelle, joka sisältää serialisoidun kopion kaikista annetuista argumenteista. Jos palvelimen funktio palauttaa arvon, se serialisoidaan ja palautetaan asiakkaalle.
 
-Alternatively, add `'use server';` at the very top of a file to mark all exports within that file as async server functions that can be used anywhere, including imported in client component files.
+Vaihtoehtoisesti, lisää `'use server';` tiedoston alkuun merkitsemään kaikki tiedoston exportit palvelinpuolen funktioiksi, joita voidaan käyttää missä tahansa, myös tuotuna asiakaspuolen komponenttitiedostoissa.
 
 #### Rajoitukset {/*caveats*/}
 
-* Remember that parameters to functions marked with `'use server'` are fully client-controlled. For security, always treat them as untrusted input, making sure to validate and escape the arguments as appropriate.
-* To avoid the confusion that might result from mixing client- and server-side code in the same file, `'use server'` can only be used in server-side files; the resulting functions can be passed to client components through props.
-* Because the underlying network calls are always asynchronous, `'use server'` can be used only on async functions.
-* Directives like `'use server'` must be at the very beginning of their function or file, above any other code including imports (comments above directives are OK). They must be written with single or double quotes, not backticks. (The `'use xyz'` directive format somewhat resembles the `useXyz()` Hook naming convention, but the similarity is coincidental.)
+* Muista, että `'use server'`-merkittyjen funktioiden parametrit ovat täysin asiakkaan hallinnassa. Turvallisuuden vuoksi käsittele niitä aina epäluotettavana syötteenä ja varmista, että validoit ja escapeet argumentit asianmukaisesti.
+* Välttääksesi sekaannusta, joka voi johtua asiakas- ja palvelinpuolen koodin sekoittamisesta samassa tiedostossa, `'use server'` voidaan käyttää vain palvelinpuolen tiedostoissa; tuloksena olevia funktioita voidaan välittää asiakaspuolen komponenteille propsina.
+* Koska taustalla olevat verkkopyynnöt ovat aina asynkronisia, `'use server'` voidaan käyttää vain async funktioissa.
+* Direktiivit kuten `'use server'` on oltava funktion tai tiedoston alussa, ennen kaikkia tuontilausekkeita tai muuta koodia (kommentit direktiivien yläpuolella on OK). Ne on kirjoitettava yksittäisillä tai kaksinkertaisilla lainausmerkeillä, ei gravismerkeillä. (Direktiivien muoto `'use xyz'` muistuttaa jonkin verran `useXyz()`-Hookin nimeämiskäytäntöä, mutta samankaltaisuus on sattumanvaraista.)
 
 ## Käyttö {/*usage*/}
 
 <Wip>
-This section is a work in progress. 
+Tämä osio on kesken.
 
-This API can be used in any framework that supports React Server Components. You may find additional documentation from them.
-* [Next.js documentation](https://nextjs.org/docs/getting-started/react-essentials)
-* More coming soon
+Tätä rajapintaa voidaan käyttää missä tahansa kehyksessä, joka tukee Reactin palvelinkomponentteja. Lisätietoja löytyy niiden dokumentaatiosta.
+* [Next.js dokumentaatio](https://nextjs.org/docs/getting-started/react-essentials)
+* Lisää tulossa pian
 </Wip>
\ No newline at end of file

From d783fadb448f4b2b8d19b886444041fb1b0484c1 Mon Sep 17 00:00:00 2001
From: Miro Rauhala <4082806+mirorauhala@users.noreply.github.com>
Date: Wed, 20 Sep 2023 20:51:57 +0300
Subject: [PATCH 30/34] Translate Components

---
 GLOSSARY.md                                   |   2 +
 .../reference/react-dom/components/common.md  | 750 +++++++++---------
 .../reference/react-dom/components/index.md   |  74 +-
 .../reference/react-dom/components/input.md   | 305 ++++---
 .../reference/react-dom/components/option.md  |  40 +-
 .../react-dom/components/progress.md          |  20 +-
 .../reference/react-dom/components/select.md  | 214 ++---
 .../react-dom/components/textarea.md          | 186 ++---
 8 files changed, 799 insertions(+), 792 deletions(-)

diff --git a/GLOSSARY.md b/GLOSSARY.md
index 8d7c725cf..eab2783a4 100644
--- a/GLOSSARY.md
+++ b/GLOSSARY.md
@@ -43,3 +43,5 @@
 - **codebase**: koodipohja
 - **property**: en keksinyt järkevää suomennosta, property
 - **scope**: käyttöalue
+- **bubbles**: kuplii (bublling in JavaScript)
+- **capture**: nappaus (capture in JavaScript)
diff --git a/src/content/reference/react-dom/components/common.md b/src/content/reference/react-dom/components/common.md
index ed5e1df21..9af49cffc 100644
--- a/src/content/reference/react-dom/components/common.md
+++ b/src/content/reference/react-dom/components/common.md
@@ -4,7 +4,7 @@ title: "Common components (e.g. <div>)"
 
 <Intro>
 
-All built-in browser components, such as [`<div>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div), support some common props and events.
+Kaikki selaimeen sisäänrakennetut komponentit, kuten [`<div>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div), tukevat joitakin yleisiä propseja ja tapahtumia.
 
 </Intro>
 
@@ -14,311 +14,311 @@ All built-in browser components, such as [`<div>`](https://developer.mozilla.org
 
 ## Viite {/*reference*/}
 
-### Common components (e.g. `<div>`) {/*common*/}
+### Yleiset komponentit (kuten `<div>`) {/*common*/}
 
 ```js
-<div className="wrapper">Some content</div>
+<div className="wrapper">Jotain sisältöä</div>
 ```
 
-[See more examples below.](#usage)
+[Näe lisää esimerkkejä alla.](#usage)
 
 #### Propsit {/*common-props*/}
 
-These special React props are supported for all built-in components:
-
-* `children`: A React node (an element, a string, a number, [a portal,](/reference/react-dom/createPortal) an empty node like `null`, `undefined` and booleans, or an array of other React nodes). Specifies the content inside the component. When you use JSX, you will usually specify the `children` prop implicitly by nesting tags like `<div><span /></div>`.
-
-* `dangerouslySetInnerHTML`: An object of the form `{ __html: '<p>some html</p>' }` with a raw HTML string inside. Overrides the [`innerHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML) property of the DOM node and displays the passed HTML inside. This should be used with extreme caution! If the HTML inside isn't trusted (for example, if it's based on user data), you risk introducing an [XSS](https://en.wikipedia.org/wiki/Cross-site_scripting) vulnerability. [Read more about using `dangerouslySetInnerHTML`.](#dangerously-setting-the-inner-html)
-
-* `ref`: A ref object from [`useRef`](/reference/react/useRef) or [`createRef`](/reference/react/createRef), or a [`ref` callback function,](#ref-callback) or a string for [legacy refs.](https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs) Your ref will be filled with the DOM element for this node. [Read more about manipulating the DOM with refs.](#manipulating-a-dom-node-with-a-ref)
-
-* `suppressContentEditableWarning`: A boolean. If `true`, suppresses the warning that React shows for elements that both have `children` and `contentEditable={true}` (which normally do not work together). Use this if you're building a text input library that manages the `contentEditable` content manually.
-
-* `suppressHydrationWarning`: A boolean. If you use [server rendering,](/reference/react-dom/server) normally there is a warning when the server and the client render different content. In some rare cases (like timestamps), it is very hard or impossible to guarantee an exact match. If you set `suppressHydrationWarning` to `true`, React will not warn you about mismatches in the attributes and the content of that element. It only works one level deep, and is intended to be used as an escape hatch. Don't overuse it. [Read about suppressing hydration errors.](/reference/react-dom/client/hydrateRoot#suppressing-unavoidable-hydration-mismatch-errors)
-
-* `style`: An object with CSS styles, for example `{ fontWeight: 'bold', margin: 20 }`. Similarly to the DOM [`style`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) property, the CSS property names need to be written as `camelCase`, for example `fontWeight` instead of `font-weight`. You can pass strings or numbers as values. If you pass a number, like `width: 100`, React will automatically append `px` ("pixels") to the value unless it's a [unitless property.](https://github.com/facebook/react/blob/81d4ee9ca5c405dce62f64e61506b8e155f38d8d/packages/react-dom-bindings/src/shared/CSSProperty.js#L8-L57) We recommend using `style` only for dynamic styles where you don't know the style values ahead of time. In other cases, applying plain CSS classes with `className` is more efficient. [Read more about `className` and `style`.](#applying-css-styles)
-
-These standard DOM props are also supported for all built-in components:
-
-* [`accessKey`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey): A string. Specifies a keyboard shortcut for the element. [Not generally recommended.](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey#accessibility_concerns)
-* [`aria-*`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes): ARIA attributes let you specify the accessibility tree information for this element. See [ARIA attributes](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes) for a complete reference. In React, all ARIA attribute names are exactly the same as in HTML.
-* [`autoCapitalize`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize): A string. Specifies whether and how the user input should be capitalized.
-* [`className`](https://developer.mozilla.org/en-US/docs/Web/API/Element/className): A string. Specifies the element's CSS class name. [Read more about applying CSS styles.](#applying-css-styles)
-* [`contentEditable`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable): A boolean. If `true`, the browser lets the user edit the rendered element directly. This is used to implement rich text input libraries like [Lexical.](https://lexical.dev/) React warns if you try to pass React children to an element with `contentEditable={true}` because React will not be able to update its content after user edits.
-* [`data-*`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*): Data attributes let you attach some string data to the element, for example `data-fruit="banana"`. In React, they are not commonly used because you would usually read data from props or state instead.
-* [`dir`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir): Either `'ltr'` or `'rtl'`. Specifies the text direction of the element.
-* [`draggable`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/draggable): A boolean. Specifies whether the element is draggable. Part of [HTML Drag and Drop API.](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API)
-* [`enterKeyHint`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/enterKeyHint): A string. Specifies which action to present for the enter key on virtual keyboards.
-* [`htmlFor`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor): A string. For [`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label) and [`<output>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/output), lets you [associate the label with some control.](/reference/react-dom/components/input#providing-a-label-for-an-input) Same as [`for` HTML attribute.](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/for) React uses the standard DOM property names (`htmlFor`) instead of HTML attribute names.
-* [`hidden`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden): A boolean or a string. Specifies whether the element should be hidden.
-* [`id`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id): A string. Specifies a unique identifier for this element, which can be used to find it later or connect it with other elements. Generate it with [`useId`](/reference/react/useId) to avoid clashes between multiple instances of the same component.
-* [`is`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/is): A string. If specified, the component will behave like a [custom element.](/reference/react-dom/components#custom-html-elements)
-* [`inputMode`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode): A string. Specifies what kind of keyboard to display (for example, text, number or telephone).
-* [`itemProp`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemprop): A string. Specifies which property the element represents for structured data crawlers.
-* [`lang`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang): A string. Specifies the language of the element.
-* [`onAnimationEnd`](https://developer.mozilla.org/en-US/docs/Web/API/Element/animationend_event): An [`AnimationEvent` handler](#animationevent-handler) function. Fires when a CSS animation completes.
-* `onAnimationEndCapture`: A version of `onAnimationEnd` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`onAnimationIteration`](https://developer.mozilla.org/en-US/docs/Web/API/Element/animationiteration_event): An [`AnimationEvent` handler](#animationevent-handler) function. Fires when an iteration of a CSS animation ends, and another one begins.
-* `onAnimationIterationCapture`: A version of `onAnimationIteration` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`onAnimationStart`](https://developer.mozilla.org/en-US/docs/Web/API/Element/animationstart_event): An [`AnimationEvent` handler](#animationevent-handler) function. Fires when a CSS animation starts.
-* `onAnimationStartCapture`: `onAnimationStart`, but fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`onAuxClick`](https://developer.mozilla.org/en-US/docs/Web/API/Element/auxclick_event): A [`MouseEvent` handler](#mouseevent-handler) function. Fires when a non-primary pointer button was clicked.
-* `onAuxClickCapture`: A version of `onAuxClick` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* `onBeforeInput`: An [`InputEvent` handler](#inputevent-handler) function. Fires before the value of an editable element is modified. React does *not* yet use the native [`beforeinput`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforeinput_event) event, and instead attempts to polyfill it using other events.
-* `onBeforeInputCapture`: A version of `onBeforeInput` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* `onBlur`: A [`FocusEvent` handler](#focusevent-handler) function. Fires when an element lost focus. Unlike the built-in browser [`blur`](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event) event, in React the `onBlur` event bubbles.
-* `onBlurCapture`: A version of `onBlur` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`onClick`](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event): A [`MouseEvent` handler](#mouseevent-handler) function. Fires when the primary button was clicked on the pointing device.
-* `onClickCapture`: A version of `onClick` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`onCompositionStart`](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionstart_event): A [`CompositionEvent` handler](#compositionevent-handler) function. Fires when an [input method editor](https://developer.mozilla.org/en-US/docs/Glossary/Input_method_editor) starts a new composition session.
-* `onCompositionStartCapture`: A version of `onCompositionStart` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`onCompositionEnd`](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionend_event): A [`CompositionEvent` handler](#compositionevent-handler) function. Fires when an [input method editor](https://developer.mozilla.org/en-US/docs/Glossary/Input_method_editor) completes or cancels a composition session.
-* `onCompositionEndCapture`: A version of `onCompositionEnd` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`onCompositionUpdate`](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionupdate_event): A [`CompositionEvent` handler](#compositionevent-handler) function. Fires when an [input method editor](https://developer.mozilla.org/en-US/docs/Glossary/Input_method_editor) receives a new character.
-* `onCompositionUpdateCapture`: A version of `onCompositionUpdate` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`onContextMenu`](https://developer.mozilla.org/en-US/docs/Web/API/Element/contextmenu_event): A [`MouseEvent` handler](#mouseevent-handler) function. Fires when the user tries to open a context menu.
-* `onContextMenuCapture`: A version of `onContextMenu` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`onCopy`](https://developer.mozilla.org/en-US/docs/Web/API/Element/copy_event): A [`ClipboardEvent` handler](#clipboardevent-handler) function. Fires when the user tries to copy something into the clipboard.
-* `onCopyCapture`: A version of `onCopy` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`onCut`](https://developer.mozilla.org/en-US/docs/Web/API/Element/cut_event): A [`ClipboardEvent` handler](#clipboardevent-handler) function. Fires when the user tries to cut something into the clipboard.
-* `onCutCapture`: A version of `onCut` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* `onDoubleClick`: A [`MouseEvent` handler](#mouseevent-handler) function. Fires when the user clicks twice. Corresponds to the browser [`dblclick` event.](https://developer.mozilla.org/en-US/docs/Web/API/Element/dblclick_event)
-* `onDoubleClickCapture`: A version of `onDoubleClick` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`onDrag`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/drag_event): A [`DragEvent` handler](#dragevent-handler) function. Fires while the user is dragging something. 
-* `onDragCapture`: A version of `onDrag` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`onDragEnd`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dragend_event): A [`DragEvent` handler](#dragevent-handler) function. Fires when the user stops dragging something. 
-* `onDragEndCapture`: A version of `onDragEnd` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`onDragEnter`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dragenter_event): A [`DragEvent` handler](#dragevent-handler) function. Fires when the dragged content enters a valid drop target. 
-* `onDragEnterCapture`: A version of `onDragEnter` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`onDragOver`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dragover_event): A [`DragEvent` handler](#dragevent-handler) function. Fires on a valid drop target while the dragged content is dragged over it. You must call `e.preventDefault()` here to allow dropping.
-* `onDragOverCapture`: A version of `onDragOver` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`onDragStart`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dragstart_event): A [`DragEvent` handler](#dragevent-handler) function. Fires when the user starts dragging an element.
-* `onDragStartCapture`: A version of `onDragStart` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`onDrop`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/drop_event): A [`DragEvent` handler](#dragevent-handler) function. Fires when something is dropped on a valid drop target.
-* `onDropCapture`: A version of `onDrop` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* `onFocus`: A [`FocusEvent` handler](#focusevent-handler) function. Fires when an element receives focus. Unlike the built-in browser [`focus`](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event) event, in React the `onFocus` event bubbles.
-* `onFocusCapture`: A version of `onFocus` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`onGotPointerCapture`](https://developer.mozilla.org/en-US/docs/Web/API/Element/gotpointercapture_event): A [`PointerEvent` handler](#pointerevent-handler) function. Fires when an element programmatically captures a pointer.
-* `onGotPointerCaptureCapture`: A version of `onGotPointerCapture` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`onKeyDown`](https://developer.mozilla.org/en-US/docs/Web/API/Element/keydown_event): A [`KeyboardEvent` handler](#pointerevent-handler) function. Fires when a key is pressed.
-* `onKeyDownCapture`: A version of `onKeyDown` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`onKeyPress`](https://developer.mozilla.org/en-US/docs/Web/API/Element/keypress_event): A [`KeyboardEvent` handler](#pointerevent-handler) function. Deprecated. Use `onKeyDown` or `onBeforeInput` instead.
-* `onKeyPressCapture`: A version of `onKeyPress` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`onKeyUp`](https://developer.mozilla.org/en-US/docs/Web/API/Element/keyup_event): A [`KeyboardEvent` handler](#pointerevent-handler) function. Fires when a key is released.
-* `onKeyUpCapture`: A version of `onKeyUp` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`onLostPointerCapture`](https://developer.mozilla.org/en-US/docs/Web/API/Element/lostpointercapture_event): A [`PointerEvent` handler](#pointerevent-handler) function. Fires when an element stops capturing a pointer.
-* `onLostPointerCaptureCapture`: A version of `onLostPointerCapture` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`onMouseDown`](https://developer.mozilla.org/en-US/docs/Web/API/Element/mousedown_event): A [`MouseEvent` handler](#mouseevent-handler) function. Fires when the pointer is pressed down.
-* `onMouseDownCapture`: A version of `onMouseDown` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`onMouseEnter`](https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseenter_event): A [`MouseEvent` handler](#mouseevent-handler) function. Fires when the pointer moves inside an element. Does not have a capture phase. Instead, `onMouseLeave` and `onMouseEnter` propagate from the element being left to the one being entered.
-* [`onMouseLeave`](https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseleave_event): A [`MouseEvent` handler](#mouseevent-handler) function. Fires when the pointer moves outside an element. Does not have a capture phase. Instead, `onMouseLeave` and `onMouseEnter` propagate from the element being left to the one being entered.
-* [`onMouseMove`](https://developer.mozilla.org/en-US/docs/Web/API/Element/mousemove_event): A [`MouseEvent` handler](#mouseevent-handler) function. Fires when the pointer changes coordinates.
-* `onMouseMoveCapture`: A version of `onMouseMove` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`onMouseOut`](https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseout_event): A [`MouseEvent` handler](#mouseevent-handler) function. Fires when the pointer moves outside an element, or if it moves into a child element.
-* `onMouseOutCapture`: A version of `onMouseOut` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`onMouseUp`](https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseup_event): A [`MouseEvent` handler](#mouseevent-handler) function. Fires when the pointer is released.
-* `onMouseUpCapture`: A version of `onMouseUp` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`onPointerCancel`](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointercancel_event): A [`PointerEvent` handler](#pointerevent-handler) function. Fires when the browser cancels a pointer interaction.
-* `onPointerCancelCapture`: A version of `onPointerCancel` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`onPointerDown`](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointerdown_event): A [`PointerEvent` handler](#pointerevent-handler) function. Fires when a pointer becomes active.
-* `onPointerDownCapture`: A version of `onPointerDown` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`onPointerEnter`](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointerenter_event): A [`PointerEvent` handler](#pointerevent-handler) function. Fires when a pointer moves inside an element. Does not have a capture phase. Instead, `onPointerLeave` and `onPointerEnter` propagate from the element being left to the one being entered.
-* [`onPointerLeave`](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointerleave_event): A [`PointerEvent` handler](#pointerevent-handler) function. Fires when a pointer moves outside an element. Does not have a capture phase. Instead, `onPointerLeave` and `onPointerEnter` propagate from the element being left to the one being entered.
-* [`onPointerMove`](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointermove_event): A [`PointerEvent` handler](#pointerevent-handler) function. Fires when a pointer changes coordinates.
-* `onPointerMoveCapture`: A version of `onPointerMove` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`onPointerOut`](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointerout_event): A [`PointerEvent` handler](#pointerevent-handler) function. Fires when a pointer moves outside an element, if the pointer interaction is cancelled, and [a few other reasons.](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointerout_event)
-* `onPointerOutCapture`: A version of `onPointerOut` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`onPointerUp`](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointerup_event): A [`PointerEvent` handler](#pointerevent-handler) function. Fires when a pointer is no longer active.
-* `onPointerUpCapture`: A version of `onPointerUp` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`onPaste`](https://developer.mozilla.org/en-US/docs/Web/API/Element/paste_event): A [`ClipboardEvent` handler](#clipboardevent-handler) function. Fires when the user tries to paste something from the clipboard.
-* `onPasteCapture`: A version of `onPaste` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`onScroll`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scroll_event): An [`Event` handler](#event-handler) function. Fires when an element has been scrolled. This event does not bubble.
-* `onScrollCapture`: A version of `onScroll` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`onSelect`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select_event): An [`Event` handler](#event-handler) function. Fires after the selection inside an editable element like an input changes. React extends the `onSelect` event to work for `contentEditable={true}` elements as well. In addition, React extends it to fire for empty selection and on edits (which may affect the selection).
-* `onSelectCapture`: A version of `onSelect` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`onTouchCancel`](https://developer.mozilla.org/en-US/docs/Web/API/Element/touchcancel_event): A [`TouchEvent` handler](#touchevent-handler) function. Fires when the browser cancels a touch interaction.
-* `onTouchCancelCapture`: A version of `onTouchCancel` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`onTouchEnd`](https://developer.mozilla.org/en-US/docs/Web/API/Element/touchend_event): A [`TouchEvent` handler](#touchevent-handler) function. Fires when one or more touch points are removed.
-* `onTouchEndCapture`: A version of `onTouchEnd` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`onTouchMove`](https://developer.mozilla.org/en-US/docs/Web/API/Element/touchmove_event): A [`TouchEvent` handler](#touchevent-handler) function. Fires one or more touch points are moved.
-* `onTouchMoveCapture`: A version of `onTouchMove` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`onTouchStart`](https://developer.mozilla.org/en-US/docs/Web/API/Element/touchstart_event): A [`TouchEvent` handler](#touchevent-handler) function. Fires when one or more touch points are placed.
-* `onTouchStartCapture`: A version of `onTouchStart` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`onTransitionEnd`](https://developer.mozilla.org/en-US/docs/Web/API/Element/transitionend_event): A [`TransitionEvent` handler](#transitionevent-handler) function. Fires when a CSS transition completes.
-* `onTransitionEndCapture`: A version of `onTransitionEnd` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`onWheel`](https://developer.mozilla.org/en-US/docs/Web/API/Element/wheel_event): A [`WheelEvent` handler](#wheelevent-handler) function. Fires when the user rotates a wheel button.
-* `onWheelCapture`: A version of `onWheel` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`role`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles): A string. Specifies the element role explicitly for assistive technologies.
-* [`slot`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles): A string. Specifies the slot name when using shadow DOM. In React, an equivalent pattern is typically achieved by passing JSX as props, for example `<Layout left={<Sidebar />} right={<Content />} />`.
-* [`spellCheck`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/spellcheck): A boolean or null. If explicitly set to `true` or `false`, enables or disables spellchecking.
-* [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex): A number. Overrides the default Tab button behavior. [Avoid using values other than `-1` and `0`.](https://www.tpgi.com/using-the-tabindex-attribute/)
-* [`title`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title): A string. Specifies the tooltip text for the element.
-* [`translate`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/translate): Either `'yes'` or `'no'`. Passing `'no'` excludes the element content from being translated.
-
-You can also pass custom attributes as props, for example `mycustomprop="someValue"`. This can be useful when integrating with third-party libraries. The custom attribute name must be lowercase and must not start with `on`. The value will be converted to a string. If you pass `null` or `undefined`, the custom attribute will be removed.
-
-These events fire only for the [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) elements:
-
-* [`onReset`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset_event): An [`Event` handler](#event-handler) function. Fires when a form gets reset.
-* `onResetCapture`: A version of `onReset` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`onSubmit`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event): An [`Event` handler](#event-handler) function. Fires when a form gets submitted.
-* `onSubmitCapture`: A version of `onSubmit` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-
-These events fire only for the [`<dialog>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog) elements. Unlike browser events, they bubble in React:
-
-* [`onCancel`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/cancel_event): An [`Event` handler](#event-handler) function. Fires when the user tries to dismiss the dialog.
-* `onCancelCapture`: A version of `onCancel` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`onClose`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/close_event): An [`Event` handler](#event-handler) function. Fires when a dialog has been closed.
-* `onCloseCapture`: A version of `onClose` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-
-These events fire only for the [`<details>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details) elements. Unlike browser events, they bubble in React:
-
-* [`onToggle`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDetailsElement/toggle_event): An [`Event` handler](#event-handler) function. Fires when the user toggles the details.
-* `onToggleCapture`: A version of `onToggle` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-
-These events fire for [`<img>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img), [`<iframe>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe), [`<object>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object), [`<embed>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/embed), [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link), and [SVG `<image>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_Image_Tag) elements. Unlike browser events, they bubble in React:
-
-* `onLoad`: An [`Event` handler](#event-handler) function. Fires when the resource has loaded.
-* `onLoadCapture`: A version of `onLoad` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`onError`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/error_event): An [`Event` handler](#event-handler) function. Fires when the resource could not be loaded.
-* `onErrorCapture`: A version of `onError` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-
-These events fire for resources like [`<audio>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio) and [`<video>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video). Unlike browser events, they bubble in React:
-
-* [`onAbort`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/abort_event): An [`Event` handler](#event-handler) function. Fires when the resource has not fully loaded, but not due to an error.
-* `onAbortCapture`: A version of `onAbort` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`onCanPlay`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/canplay_event): An [`Event` handler](#event-handler) function. Fires when there's enough data to start playing, but not enough to play to the end without buffering.
-* `onCanPlayCapture`: A version of `onCanPlay` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`onCanPlayThrough`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/canplaythrough_event): An [`Event` handler](#event-handler) function. Fires when there's enough data that it's likely possible to start playing without buffering until the end.
-* `onCanPlayThroughCapture`: A version of `onCanPlayThrough` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`onDurationChange`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/durationchange_event): An [`Event` handler](#event-handler) function. Fires when the media duration has updated.
-* `onDurationChangeCapture`: A version of `onDurationChange` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`onEmptied`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/emptied_event): An [`Event` handler](#event-handler) function. Fires when the media has become empty.
-* `onEmptiedCapture`: A version of `onEmptied` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`onEncrypted`](https://w3c.github.io/encrypted-media/#dom-evt-encrypted): An [`Event` handler](#event-handler) function. Fires when the browser encounters encrypted media.
-* `onEncryptedCapture`: A version of `onEncrypted` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`onEnded`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/ended_event): An [`Event` handler](#event-handler) function. Fires when the playback stops because there's nothing left to play.
-* `onEndedCapture`: A version of `onEnded` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`onError`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/error_event): An [`Event` handler](#event-handler) function. Fires when the resource could not be loaded.
-* `onErrorCapture`: A version of `onError` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`onLoadedData`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/loadeddata_event): An [`Event` handler](#event-handler) function. Fires when the current playback frame has loaded.
-* `onLoadedDataCapture`: A version of `onLoadedData` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`onLoadedMetadata`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/loadedmetadata_event): An [`Event` handler](#event-handler) function. Fires when metadata has loaded.
-* `onLoadedMetadataCapture`: A version of `onLoadedMetadata` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`onLoadStart`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/loadstart_event): An [`Event` handler](#event-handler) function. Fires when the browser started loading the resource.
-* `onLoadStartCapture`: A version of `onLoadStart` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`onPause`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/pause_event): An [`Event` handler](#event-handler) function. Fires when the media was paused.
-* `onPauseCapture`: A version of `onPause` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`onPlay`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play_event): An [`Event` handler](#event-handler) function. Fires when the media is no longer paused.
-* `onPlayCapture`: A version of `onPlay` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`onPlaying`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/playing_event): An [`Event` handler](#event-handler) function. Fires when the media starts or restarts playing.
-* `onPlayingCapture`: A version of `onPlaying` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`onProgress`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/progress_event): An [`Event` handler](#event-handler) function. Fires periodically while the resource is loading.
-* `onProgressCapture`: A version of `onProgress` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`onRateChange`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/ratechange_event): An [`Event` handler](#event-handler) function. Fires when playback rate changes.
-* `onRateChangeCapture`: A version of `onRateChange` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* `onResize`: An [`Event` handler](#event-handler) function. Fires when video changes size.
-* `onResizeCapture`: A version of `onResize` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`onSeeked`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/seeked_event): An [`Event` handler](#event-handler) function. Fires when a seek operation completes.
-* `onSeekedCapture`: A version of `onSeeked` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`onSeeking`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/seeking_event): An [`Event` handler](#event-handler) function. Fires when a seek operation starts.
-* `onSeekingCapture`: A version of `onSeeking` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`onStalled`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/stalled_event): An [`Event` handler](#event-handler) function. Fires when the browser is waiting for data but it keeps not loading.
-* `onStalledCapture`: A version of `onStalled` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`onSuspend`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/suspend_event): An [`Event` handler](#event-handler) function. Fires when loading the resource was suspended.
-* `onSuspendCapture`: A version of `onSuspend` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`onTimeUpdate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/timeupdate_event): An [`Event` handler](#event-handler) function. Fires when the current playback time updates.
-* `onTimeUpdateCapture`: A version of `onTimeUpdate` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`onVolumeChange`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/volumechange_event): An [`Event` handler](#event-handler) function. Fires when the volume has changed.
-* `onVolumeChangeCapture`: A version of `onVolumeChange` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`onWaiting`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/waiting_event): An [`Event` handler](#event-handler) function. Fires when the playback stopped due to temporary lack of data.
-* `onWaitingCapture`: A version of `onWaiting` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+Nämä Reactin erikoispropsit tuetaan kaikissa sisäänrakennetuissa komponenteissa:
+
+* `children`: A React noodi (elementti, merkkijono, numero, [portaali,](/reference/react-dom/createPortal) tyhjä noodi kuten `null`, `undefined` ja totuusarvot, tai taulukko muista React noodeista). Määrittää komponentin sisällön. Kun käytät JSX:ää, määrität `children` propsin yleensä epäsuorasti upottamalla tageja kuten `<div><span /></div>`.
+
+* `dangerouslySetInnerHTML`: Olio muodossa `{ __html: '<p>some html</p>' }` jossa on raaka HTML merkkijono sisällä. Ohittaa DOM noodin [`innerHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML) ominaisuuden ja näyttää annetun HTML:n sisällä. Tätä tulisi käyttää erityisellä varovaisuudella! Jos HTML sisällä ei ole luotettavaa (esimerkiksi jos se perustuu käyttäjän dataan), riski [XSS](https://en.wikipedia.org/wiki/Cross-site_scripting) haavoittuvuuden tuomisesta. [Lue lisää `dangerouslySetInnerHTML`:n käytöstä.](#dangerously-setting-the-inner-html)
+
+* `ref`: Ref olio [`useRef`:sta](/reference/react/useRef) tai [`createRef`:sta](/reference/react/createRef), tai [`ref` kutsufunktio,](#ref-callback) tai merkkijono [vanhoille refseille.](https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs) Refisi täytetään tämän DOM noodin elementillä. [Lue lisää DOM:n manipuloinnista refien avulla.](#manipulating-a-dom-node-with-a-ref)
+
+* `suppressContentEditableWarning`: Totuusarvo. Jos `true`, estää Reactin näyttämästä varoitusta elementeille joilla on sekä `children` että `contentEditable={true}` (jotka eivät normaalisti toimi yhdessä). Käytä tätä jos rakennat tekstisyöttökirjastoa joka hallinnoi `contentEditable` sisältöä manuaalisesti.
+
+* `suppressHydrationWarning`: Totuusarvo. Jos käytät [palvelimen renderöintiä,](/reference/react-dom/server) normaalisti varoitetaan jos palvelin ja selain renderöivät eri sisältöä. Joissain harvoissa tapauksissa (kuten aikaleimoissa), on hyvin vaikeaa tai mahdotonta taata täsmällistä vastaavuutta. Jos asetat `suppressHydrationWarning`:n arvoksi `true`, React ei varoita sinua eroista elementin attribuuteissa ja sisällössä. Se toimii vain yhden tason syvyyteen asti, ja on tarkoitettu käytettäväksi pakotienä. Älä käytä sitä liikaa. [Lue lisää hydratointivirheiden estämisestä.](/reference/react-dom/client/hydrateRoot#suppressing-unavoidable-hydration-mismatch-errors)
+
+* `style`: Olio CSS tyyleistä, esimerkiksi `{ fontWeight: 'bold', margin: 20 }`. Samalla tavalla kuin DOM [`style`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) ominaisuudessa, CSS ominaisuudet tulee kirjoittaa `camelCase` muodossa, esimerkiksi `fontWeight` `font-weight`:n sijaan. Voit antaa merkkijonoja tai numeroita arvoiksi. Jos annat numeron, kuten `width: 100`, React lisää automaattisesti `px` ("pikseliä") arvon perään ellei kyseessä ole [yksikköominaisuus.](https://github.com/facebook/react/blob/81d4ee9ca5c405dce62f64e61506b8e155f38d8d/packages/react-dom-bindings/src/shared/CSSProperty.js#L8-L57) Suosittelemme käyttämään `style`:a vain dynaamisissa tyyleissä joissa et tiedä tyylejä etukäteen. Muissa tapauksissa, pelkkien CSS luokkien käyttäminen `className`:n kanssa on tehokkaampaa. [Lue lisää `className` ja `style`:sta.](#applying-css-styles)
+
+Nämä standardit DOM propsit tuetaan myös kaikissa sisäänrakennetuissa komponenteissa:
+
+* [`accessKey`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey): Merkkijono. Määrittää pikanäppäimen elementille. [Ei yleensä suositeltavaa.](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey#accessibility_concerns)
+* [`aria-*`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes): ARIA attribuuttien avulla voit määrittää saavutettavuuspuun tiedot tälle elementille. Katso [ARIA attribuutit](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes) täydellistä viitettä varten. Reactissa kaikki ARIA attribuuttien nimet ovat täsmälleen samat kuin HTML:ssä.
+* [`autoCapitalize`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize): Merkkijono. Määrittää pitäisikö ja miten käyttäjän syöte kirjoittaa isolla alkukirjaimella.
+* [`className`](https://developer.mozilla.org/en-US/docs/Web/API/Element/className): Merkkijono. Määrittää elementin CSS luokan. [Lue lisää CSS tyyleistä.](#applying-css-styles)
+* [`contentEditable`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable): Totuusarvo. Jos `true`, selain antaa käyttäjän muokata renderöityä elementtiä suoraan. Tätä käytetään toteuttamaan rikastekstisyöttökirjastoja kuten [Lexical.](https://lexical.dev/) React varoittaa jos yrität antaa React lapsia elementille jolla on `contentEditable={true}` koska React ei pysty päivittämään sisältöä käyttäjän muokkauksen jälkeen.
+* [`data-*`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*): Data attribuuttien avulla voit liittää merkkijono-dataa elementtiin, esimerkiksi `data-fruit="banana"`. Reactissa niitä ei yleensä käytetä koska data luetaan yleensä propsista tai tilasta.
+* [`dir`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir): Joko `'ltr'` tai `'rtl'`. Määrittää elementin tekstin suunnan.
+* [`draggable`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/draggable): Totuusarvo. Määrittää onko elementti raahattava. Osa [HTML Drag and Drop API:a.](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API)
+* [`enterKeyHint`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/enterKeyHint): Merkkijono. Määrittää mitä toimintoa esitetään enter näppäimelle virtuaalisilla näppäimistöillä.
+* [`htmlFor`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor): Merkkijono. [`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label) ja [`<output>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/output) elementeille, antaa sinun [liittää labelin johonkin kontrolliin.](/reference/react-dom/components/input#providing-a-label-for-an-input) Sama kuin [`for` HTML attribuutti.](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/for) React käyttää standardia DOM ominaisuuden nimeä (`htmlFor`) HTML attribuutin nimen sijaan.
+* [`hidden`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden): Totuusarvo tai merkkijono. Määrittää pitäisikö elementin olla piilotettuna.
+* [`id`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id): Merkkijono. Määrittää uniikin tunnisteen tälle elementille, jota voidaan käyttää löytämään se myöhemmin tai yhdistämään se muihin elementteihin. Luo se [`useId`:lla](/reference/react/useId) välttääksesi törmäykset saman komponentin useiden instanssien välillä.
+* [`is`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/is): Merkkijono. Jos määritetty, komponentti käyttäytyy kuin [custom elementti.](/reference/react-dom/components#custom-html-elements)
+* [`inputMode`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode): Merkkijono. Määrittää minkä tyyppisen näppäimistön näyttää (esimerkiksi teksti, numero tai puhelinnumero).
+* [`itemProp`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemprop): Merkkijono. Määrittää minkä ominaisuuden elementti edustaa strukturoituja data crawlereita varten.
+* [`lang`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang): Merkkijono. Määrittää elementin kielen.
+* [`onAnimationEnd`](https://developer.mozilla.org/en-US/docs/Web/API/Element/animationend_event): [`AnimationEvent` käsittelijäfunktio](#animationevent-handler). Suoritetaan kun CSS animaatio päättyy.
+* `onAnimationEndCapture`: Versio `onAnimationEnd`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+* [`onAnimationIteration`](https://developer.mozilla.org/en-US/docs/Web/API/Element/animationiteration_event): [`AnimationEvent` käsittelijäfunktio](#animationevent-handler). Suoritetaan kun CSS animaation iteraatio päättyy ja toinen alkaa.
+* `onAnimationIterationCapture`: Versio `onAnimationIteration`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+* [`onAnimationStart`](https://developer.mozilla.org/en-US/docs/Web/API/Element/animationstart_event): [`AnimationEvent` käsittelijäfunktio](#animationevent-handler). Suoritetaan kun CSS animaatio alkaa.
+* `onAnimationStartCapture`: `onAnimationStart`, but fires in the [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+* [`onAuxClick`](https://developer.mozilla.org/en-US/docs/Web/API/Element/auxclick_event): [`MouseEvent` käsittelijäfunktio](#mouseevent-handler). Suoritetaan kun ei-pääpainiketta painetaan.
+* `onAuxClickCapture`: Versio `onAuxClick`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+* `onBeforeInput`: [`InputEvent` käsittelijäfunktio](#inputevent-handler). Suoritetaan ennen muokattavan elementin arvon muuttamista. React ei vielä käytä selaimen [`beforeinput`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforeinput_event) tapahtumaa, vaan yrittää polyfillata sen käyttäen muita eventtejä.
+* `onBeforeInputCapture`: Versio `onBeforeInput`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+* `onBlur`: [`FocusEvent` käsittelijäfunktio](#focusevent-handler). Suoritetaan kun elementti menettää kohdistuksen. Toisin kuin selaimen [`blur`](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event) tapahtuma, Reactissa `onBlur` tapahtuma kuplii.
+* `onBlurCapture`: Versio `onBlur`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+* [`onClick`](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event): [`MouseEvent` käsittelijäfunktio](#mouseevent-handler). Suoritetaan kun pääpainiketta painetaan osoittimella.
+* `onClickCapture`: Versio `onClick`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+* [`onCompositionStart`](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionstart_event): [`CompositionEvent` käsittelijäfunktio](#compositionevent-handler). Suoritetaan kun [syöttömenetelmän editori](https://developer.mozilla.org/en-US/docs/Glossary/Input_method_editor) aloittaa uuden kompositioistunnon.
+* `onCompositionStartCapture`: Versio `onCompositionStart`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+* [`onCompositionEnd`](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionend_event): [`CompositionEvent` käsittelijäfunktio](#compositionevent-handler). Suoritetaan kun [syöttömenetelmän editori](https://developer.mozilla.org/en-US/docs/Glossary/Input_method_editor) lopettaa tai peruuttaa kompositioistunnon.
+* `onCompositionEndCapture`: Versio `onCompositionEnd`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+* [`onCompositionUpdate`](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionupdate_event): [`CompositionEvent` käsittelijäfunktio](#compositionevent-handler). Suoritetaan kun [syöttömenetelmän editori](https://developer.mozilla.org/en-US/docs/Glossary/Input_method_editor) vastaanottaa uuden merkin.
+* `onCompositionUpdateCapture`: Versio `onCompositionUpdate`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+* [`onContextMenu`](https://developer.mozilla.org/en-US/docs/Web/API/Element/contextmenu_event): [`MouseEvent` käsittelijäfunktio](#mouseevent-handler). Suoritetaan kun käyttäjä yrittää avata kontekstivalikon.
+* `onContextMenuCapture`: Versio `onContextMenu`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+* [`onCopy`](https://developer.mozilla.org/en-US/docs/Web/API/Element/copy_event): [`ClipboardEvent` käsittelijäfunktio](#clipboardevent-handler). Suoritetaan kun käyttäjä yrittää kopioida jotain leikepöydälle.
+* `onCopyCapture`: Versio `onCopy`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+* [`onCut`](https://developer.mozilla.org/en-US/docs/Web/API/Element/cut_event): [`ClipboardEvent` käsittelijäfunktio](#clipboardevent-handler). Suoritetaan kun käyttäjä yrittää leikata jotain leikepöydälle.
+* `onCutCapture`: Versio `onCut`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+* `onDoubleClick`: [`MouseEvent` käsittelijäfunktio](#mouseevent-handler). Suoritetaan kun käyttäjä painaa pääpainiketta kahdesti. Vastaa selaimen [`dblclick` tapahtumaa.](https://developer.mozilla.org/en-US/docs/Web/API/Element/dblclick_event)
+* `onDoubleClickCapture`: Versio `onDoubleClick`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+* [`onDrag`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/drag_event): [`DragEvent` käsittelijäfunktio](#dragevent-handler). Suoritetaan kun käyttäjä raahaa jotain.
+* `onDragCapture`: Versio `onDrag`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+* [`onDragEnd`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dragend_event): [`DragEvent` käsittelijäfunktio](#dragevent-handler). Suoritetaan kun käyttäjä lopettaa raahaamisen.
+* `onDragEndCapture`: Versio `onDragEnd`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+* [`onDragEnter`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dragenter_event): [`DragEvent` käsittelijäfunktio](#dragevent-handler). Suoritetaan kun raahattu sisältö tulee pätevän pudotuskohteen sisään.
+* `onDragEnterCapture`: Versio `onDragEnter`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+* [`onDragOver`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dragover_event): [`DragEvent` käsittelijäfunktio](#dragevent-handler). Suoritetaan pätevällä pudotuskohteella kun raahattu sisältö raahataan sen päällä. Sinun tulee kutsua `e.preventDefault()` täällä jotta pudottaminen sallitaan.
+* `onDragOverCapture`: Versio `onDragOver`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+* [`onDragStart`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dragstart_event): [`DragEvent` käsittelijäfunktio](#dragevent-handler). Suoritetaan kun käyttäjä aloittaa raahaamisen.
+* `onDragStartCapture`: Versio `onDragStart`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+* [`onDrop`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/drop_event): [`DragEvent` käsittelijäfunktio](#dragevent-handler). Suoritetaan kun jotain pudotetaan pätevälle pudotuskohteelle.
+* `onDropCapture`: Versio `onDrop`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+* `onFocus`: [`FocusEvent` käsittelijäfunktio](#focusevent-handler). Suoritetaan kun elementti saa kohdistuksen. Toisin kuin selaimen [`focus`](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event) tapahtuma, Reactissa `onFocus` tapahtuma kuplii.
+* `onFocusCapture`: Versio `onFocus`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+* [`onGotPointerCapture`](https://developer.mozilla.org/en-US/docs/Web/API/Element/gotpointercapture_event): [`PointerEvent` käsittelijäfunktio](#pointerevent-handler). Suoritetaan kun elementti ohjelmallisesti nappaa osoittimen.
+* `onGotPointerCaptureCapture`: Versio `onGotPointerCapture`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+* [`onKeyDown`](https://developer.mozilla.org/en-US/docs/Web/API/Element/keydown_event): [`KeyboardEvent` käsittelijäfunktio](#pointerevent-handler). Suoritetaan kun näppäintä painetaan.
+* `onKeyDownCapture`: Versio `onKeyDown`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+* [`onKeyPress`](https://developer.mozilla.org/en-US/docs/Web/API/Element/keypress_event): [`KeyboardEvent` käsittelijäfunktio](#pointerevent-handler). Vanhentunut. Käytä sen sijaan `onKeyDown` tai `onBeforeInput`.
+* `onKeyPressCapture`: Versio `onKeyPress`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+* [`onKeyUp`](https://developer.mozilla.org/en-US/docs/Web/API/Element/keyup_event): [`KeyboardEvent` käsittelijäfunktio](#pointerevent-handler). Suoritetaan kun näppäin vapautetaan.
+* `onKeyUpCapture`: Versio `onKeyUp`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+* [`onLostPointerCapture`](https://developer.mozilla.org/en-US/docs/Web/API/Element/lostpointercapture_event): [`PointerEvent` käsittelijäfunktio](#pointerevent-handler). Suoritetaan kun elementti lopettaa osoittimen nappaamisen.
+* `onLostPointerCaptureCapture`: Versio `onLostPointerCapture`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+* [`onMouseDown`](https://developer.mozilla.org/en-US/docs/Web/API/Element/mousedown_event): [`MouseEvent` käsittelijäfunktio](#mouseevent-handler). Suoritetaan kun osoitin painetaan alas.
+* `onMouseDownCapture`: Versio `onMouseDown`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+* [`onMouseEnter`](https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseenter_event): [`MouseEvent` käsittelijäfunktio](#mouseevent-handler). Suoritetaan kun osoitin liikkuu elementin sisään. Ei ole nappausvaihetta. Sen sijaan, `onMouseLeave` ja `onMouseEnter` leviävät elementistä josta poistutaan elementtiin johon tullaan.
+* [`onMouseLeave`](https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseleave_event): [`MouseEvent` käsittelijäfunktio](#mouseevent-handler). Suoritetaan kun osoitin liikkuu elementin ulkopuolelle. Ei ole nappausvaihetta. Sen sijaan, `onMouseLeave` ja `onMouseEnter` leviävät elementistä josta poistutaan elementtiin johon tullaan.
+* [`onMouseMove`](https://developer.mozilla.org/en-US/docs/Web/API/Element/mousemove_event): [`MouseEvent` käsittelijäfunktio](#mouseevent-handler). Suoritetaan osoittimen koordinaatit muuttuvat.
+* `onMouseMoveCapture`: Versio `onMouseMove`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+* [`onMouseOut`](https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseout_event): [`MouseEvent` käsittelijäfunktio](#mouseevent-handler). Suoritetaan kun osoitin liikkuu elementin ulkopuolelle, tai jos se liikkuu lapsielementtiin.
+* `onMouseOutCapture`: Versio `onMouseOut`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+* [`onMouseUp`](https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseup_event): [`MouseEvent` käsittelijäfunktio](#mouseevent-handler). Suoritetaan kun osoitin vapautetaan.
+* `onMouseUpCapture`: Versio `onMouseUp`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+* [`onPointerCancel`](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointercancel_event): [`PointerEvent` käsittelijäfunktio](#pointerevent-handler). Suoritetaan kun selain peruuttaa osoittimen interaktion.
+* `onPointerCancelCapture`: Versio `onPointerCancel`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+* [`onPointerDown`](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointerdown_event): [`PointerEvent` käsittelijäfunktio](#pointerevent-handler). Suoritetaan kun osoitin aktivoituu.
+* `onPointerDownCapture`: Versio `onPointerDown`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+* [`onPointerEnter`](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointerenter_event): [`PointerEvent` käsittelijäfunktio](#pointerevent-handler). Suoritetaan kun osoitin liikkuu elementin sisään. Ei ole nappausvaihetta. Sen sijaan, `onPointerLeave` ja `onPointerEnter` leviävät elementistä josta poistutaan elementtiin johon tullaan.
+* [`onPointerLeave`](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointerleave_event): [`PointerEvent` käsittelijäfunktio](#pointerevent-handler). Suoritetaan kun osoitin liikkuu elementin ulkopuolelle. Ei ole nappausvaihetta. Sen sijaan, `onPointerLeave` ja `onPointerEnter` leviävät elementistä josta poistutaan elementtiin johon tullaan.
+* [`onPointerMove`](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointermove_event): [`PointerEvent` käsittelijäfunktio](#pointerevent-handler). Suoritetaan kun osoittimen koordinaatit muuttuvat.
+* `onPointerMoveCapture`: Versio `onPointerMove`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+* [`onPointerOut`](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointerout_event): [`PointerEvent` käsittelijäfunktio](#pointerevent-handler). Suoritetaan kun osoitin liikkuu elementin ulkopuolelle, jos osoittimen interaktio peruutetaan, ja [muutamista muista syistä.](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointerout_event)
+* `onPointerOutCapture`: Versio `onPointerOut`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+* [`onPointerUp`](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointerup_event): [`PointerEvent` käsittelijäfunktio](#pointerevent-handler). Suoritetaan kun osoitin ei ole enää aktiivinen.
+* `onPointerUpCapture`: Versio `onPointerUp`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+* [`onPaste`](https://developer.mozilla.org/en-US/docs/Web/API/Element/paste_event): [`ClipboardEvent` käsittelijäfunktio](#clipboardevent-handler). Suoritetaan kun käyttäjä yrittää liittää jotain leikepöydältä.
+* `onPasteCapture`: Versio `onPaste`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+* [`onScroll`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scroll_event): [`Event` käsittelijäfunktio](#event-handler). Suoritetaan kun elementtiä on skrollattu. Tämä tapahtuma ei kupli.
+* `onScrollCapture`: Versio `onScroll`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+* [`onSelect`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select_event): [`Event` käsittelijäfunktio](#event-handler). Suoritetaan kun valinta muuttuu muokattavassa elementissä kuten inputissa. React laajentaa `onSelect` tapahtuman toimimaan myös `contentEditable={true}` elementeille. Lisäksi, React laajentaa sen suorittumaan tyhjälle valinnalle ja muokkauksille (jotka voivat vaikuttaa valintaan).
+* `onSelectCapture`: Versio `onSelect`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+* [`onTouchCancel`](https://developer.mozilla.org/en-US/docs/Web/API/Element/touchcancel_event): [`TouchEvent` käsittelijäfunktio](#touchevent-handler). Suoritetaan kun selain peruuttaa kosketus interaktion.
+* `onTouchCancelCapture`: Versio `onTouchCancel`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+* [`onTouchEnd`](https://developer.mozilla.org/en-US/docs/Web/API/Element/touchend_event): [`TouchEvent` käsittelijäfunktio](#touchevent-handler). Suoritetaan kun yksi tai useampi kosketuspiste poistetaan.
+* `onTouchEndCapture`: Versio `onTouchEnd`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+* [`onTouchMove`](https://developer.mozilla.org/en-US/docs/Web/API/Element/touchmove_event): [`TouchEvent` käsittelijäfunktio](#touchevent-handler). Suoritetaan kun yksi tai useampi kosketuspiste liikkuu.
+* `onTouchMoveCapture`: Versio `onTouchMove`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+* [`onTouchStart`](https://developer.mozilla.org/en-US/docs/Web/API/Element/touchstart_event): [`TouchEvent` käsittelijäfunktio](#touchevent-handler). Suoritetaan kun yksi tai useampi kosketuspiste asetetaan.
+* `onTouchStartCapture`: Versio `onTouchStart`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+* [`onTransitionEnd`](https://developer.mozilla.org/en-US/docs/Web/API/Element/transitionend_event): [`TransitionEvent` käsittelijäfunktio](#transitionevent-handler). Suoritetaan kun CSS siirtymä päättyy.
+* `onTransitionEndCapture`: Versio `onTransitionEnd`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+* [`onWheel`](https://developer.mozilla.org/en-US/docs/Web/API/Element/wheel_event): [`WheelEvent` käsittelijäfunktio](#wheelevent-handler). Suoritetaan kun käyttäjä pyörittää rullaa.
+* `onWheelCapture`: Versio `onWheel`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+* [`role`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles): Merkkijono. Määrittää elementin roolin selkeästi avustaville teknologioille.
+* [`slot`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles): Merkkijono. Määrittää slotin nimen kun käytetään shadow DOM:ia. Reactissa, vastaava tapahtuu yleensä välittämällä JSX propseina, esimerkiksi `<Layout left={<Sidebar />} right={<Content />} />`.
+* [`spellCheck`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/spellcheck): Totuusarvo tai null. Jos asetettu `true` tai `false`, mahdollistaa tai estää oikeinkirjoituksen tarkistuksen.
+* [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex): Numero. Ylikirjoittaa oletus sarkain -näppäimen käyttäytymisen. [Vältä käyttämästä arvoja jotka eivät ole `-1` ja `0`.](https://www.tpgi.com/using-the-tabindex-attribute/)
+* [`title`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title): Merkkijono. Määrittää työkaluvihjeen tekstin elementille.
+* [`translate`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/translate): Joko `'yes'` tai `'no'`. `'no'` estää elementin sisällön kääntämisen.
+
+Voit myös välittää omia attribuutteja propseina, esimerkiksi `mycustomprop="someValue"`. Tämä voi olla hyödyllistä kun integroit kolmannen osapuolen kirjastojen kanssa. Oma attribuutin nimi tulee olla pienillä kirjaimilla ja ei saa alkaa `on`:lla. Arvo muutetaan merkkijonoksi. Jos välität `null` tai `undefined`, oma attribuutti poistetaan.
+
+Nämä tapahtumat suoritetaan vain [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) elementeille:
+
+* [`onReset`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset_event): [`Event` käsittelijäfunktio](#event-handler). Suoritetaan kun lomake nollataan.
+* `onResetCapture`: Versio `onReset`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+* [`onSubmit`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event): [`Event` käsittelijäfunktio](#event-handler). Suoritetaan kun lomake lähetetään.
+* `onSubmitCapture`: Versio `onSubmit`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+
+Nämä tapahtumat suoritetaan vain [`<dialog>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog) elementeille. Toisin kuin selaimen tapahtumat, ne kuplivat Reactissa:
+
+* [`onCancel`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/cancel_event): [`Event` käsittelijäfunktio](#event-handler). Suoritetaan kun käyttäjä yrittää sulkea dialogin.
+* `onCancelCapture`: Versio `onCancel`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+* [`onClose`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/close_event): [`Event` käsittelijäfunktio](#event-handler). Suoritetaan kun dialogi on suljettu.
+* `onCloseCapture`: Versio `onClose`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+
+Nämä tapahtumat suoritetaan vain [`<details>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details) elementeille. Toisin kuin selaimen tapahtumat, ne kuplivat Reactissa:
+
+* [`onToggle`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDetailsElement/toggle_event): [`Event` käsittelijäfunktio](#event-handler). Suoritetaan kun käyttäjä vaihtaa tilaa.
+* `onToggleCapture`: Versio `onToggle`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+
+Nämä tapahtumat suoritetaan [`<img>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img), [`<iframe>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe), [`<object>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object), [`<embed>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/embed), [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link), ja [SVG `<image>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_Image_Tag) elementeille. Toisin kuin selaimen tapahtumat, ne kuplivat Reactissa:
+
+* `onLoad`: [`Event` käsittelijäfunktio](#event-handler). Suoritetaan kun resurssi on ladattu.
+* `onLoadCapture`: Versio `onLoad`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+* [`onError`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/error_event): [`Event` käsittelijäfunktio](#event-handler). Suoritetaan kun resurssia ei voitu ladata.
+* `onErrorCapture`: Versio `onError`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+
+Nämä tapahtumat suoritetaan resursseille kuten [`<audio>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio) ja [`<video>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video). Toisin kuin selaimen tapahtumat, ne kuplivat Reactissa:
+
+* [`onAbort`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/abort_event): [`Event` käsittelijäfunktio](#event-handler). Suoritetaan kun resurssia ei voitu ladata, mutta ei virheen takia.
+* `onAbortCapture`: Versio `onAbort`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+* [`onCanPlay`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/canplay_event): [`Event` käsittelijäfunktio](#event-handler). Suoritetaan kun dataa on tarpeeksi toistoa varten, mutta ei tarpeeksi toistamiseen loppuun asti ilman puskurointia.
+* `onCanPlayCapture`: Versio `onCanPlay`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+* [`onCanPlayThrough`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/canplaythrough_event): [`Event` käsittelijäfunktio](#event-handler). Suoritetaan kun dataa on tarpeeksi toistoa varten, ja todennäköisesti mahdollista aloittaa toisto ilman puskurointia loppuun asti.
+* `onCanPlayThroughCapture`: Versio `onCanPlayThrough`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+* [`onDurationChange`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/durationchange_event): [`Event` käsittelijäfunktio](#event-handler). Suoritetaan kun median kesto on päivitetty.
+* `onDurationChangeCapture`: Versio `onDurationChange`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+* [`onEmptied`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/emptied_event): [`Event` käsittelijäfunktio](#event-handler). Suoritetaan kun media on tyhjentynyt.
+* `onEmptiedCapture`: Versio `onEmptied`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+* [`onEncrypted`](https://w3c.github.io/encrypted-media/#dom-evt-encrypted): [`Event` käsittelijäfunktio](#event-handler). Suoritetaan kun selain kohtaa salattua mediaa.
+* `onEncryptedCapture`: Versio `onEncrypted`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+* [`onEnded`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/ended_event): [`Event` käsittelijäfunktio](#event-handler). Suoritetaan kun toisto loppuu koska mitään ei ole jäljellä toistettavaksi.
+* `onEndedCapture`: Versio `onEnded`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+* [`onError`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/error_event): [`Event` käsittelijäfunktio](#event-handler). Suoritetaan kun resurssia ei voitu ladata.
+* `onErrorCapture`: Versio `onError`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+* [`onLoadedData`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/loadeddata_event): [`Event` käsittelijäfunktio](#event-handler). Suoritetaan kun nykyinen toistokehys on ladattu.
+* `onLoadedDataCapture`: Versio `onLoadedData`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+* [`onLoadedMetadata`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/loadedmetadata_event): [`Event` käsittelijäfunktio](#event-handler). Suoritetaan kun metadata on ladattu.
+* `onLoadedMetadataCapture`: Versio `onLoadedMetadata`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+* [`onLoadStart`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/loadstart_event): [`Event` käsittelijäfunktio](#event-handler). Suoritetaan kun selain aloittaa resurssin lataamisen.
+* `onLoadStartCapture`: Versio `onLoadStart`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+* [`onPause`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/pause_event): [`Event` käsittelijäfunktio](#event-handler). Suoritetaan kun media on tauolla.
+* `onPauseCapture`: Versio `onPause`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+* [`onPlay`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play_event): [`Event` käsittelijäfunktio](#event-handler). Suoritetaan kun media ei ole enää tauolla.
+* `onPlayCapture`: Versio `onPlay`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+* [`onPlaying`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/playing_event): [`Event` käsittelijäfunktio](#event-handler). Suoritetaan kun media alkaa tai jatkaa toistoa.
+* `onPlayingCapture`: Versio `onPlaying`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+* [`onProgress`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/progress_event): [`Event` käsittelijäfunktio](#event-handler). Suoritetaan säännöllisesti kun resurssiä ladataan.
+* `onProgressCapture`: Versio `onProgress`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+* [`onRateChange`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/ratechange_event): [`Event` käsittelijäfunktio](#event-handler). Suoritetaan kun toistonopeus muuttuu.
+* `onRateChangeCapture`: Versio `onRateChange`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+* `onResize`: [`Event` käsittelijäfunktio](#event-handler). Suoritetaan kun videon koko muuttuu.
+* `onResizeCapture`: Versio `onResize`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+* [`onSeeked`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/seeked_event): [`Event` käsittelijäfunktio](#event-handler). Suoritetaan kun siirtymisoperaatio on valmis.
+* `onSeekedCapture`: Versio `onSeeked`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+* [`onSeeking`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/seeking_event): [`Event` käsittelijäfunktio](#event-handler). Suoritetaan kun siirtymisoperaatio alkaa.
+* `onSeekingCapture`: Versio `onSeeking`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+* [`onStalled`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/stalled_event): [`Event` käsittelijäfunktio](#event-handler). Suoritetaan kun selain odottaa dataa mutta se ei lataudu.
+* `onStalledCapture`: Versio `onStalled`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+* [`onSuspend`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/suspend_event): [`Event` käsittelijäfunktio](#event-handler). Suoritetaan kun resurssin lataus keskeytyy.
+* `onSuspendCapture`: Versio `onSuspend`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+* [`onTimeUpdate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/timeupdate_event): [`Event` käsittelijäfunktio](#event-handler). Suoritetaan kun nykyinen toistoaika päivittyy.
+* `onTimeUpdateCapture`: Versio `onTimeUpdate`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+* [`onVolumeChange`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/volumechange_event): [`Event` käsittelijäfunktio](#event-handler). Suoritetaan kun äänenvoimakkuus on muuttunut.
+* `onVolumeChangeCapture`: Versio `onVolumeChange`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+* [`onWaiting`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/waiting_event): [`Event` käsittelijäfunktio](#event-handler). Suoritetaan kun toisto on pysähtynyt väliaikaisesti data puutteen takia.
+* `onWaitingCapture`: Versio `onWaiting`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
 
 #### Rajoitukset {/*common-caveats*/}
 
-- You cannot pass both `children` and `dangerouslySetInnerHTML` at the same time.
-- Some events (like `onAbort` and `onLoad`) don't bubble in the browser, but bubble in React.
+- Et voi välittää sekä `children` että `dangerouslySetInnerHTML` samaan aikaan.
+- Jotkin tapahtumat (kuten `onAbort` ja `onLoad`) eivät kupli selaimessa, mutta kuplivat Reactissa.
 
 ---
 
-### `ref` callback function {/*ref-callback*/}
+### `ref` callback-funktio {/*ref-callback*/}
 
-Instead of a ref object (like the one returned by [`useRef`](/reference/react/useRef#manipulating-the-dom-with-a-ref)), you may pass a function to the `ref` attribute.
+Ref olion sijaan (kuten [`useRef`](/reference/react/useRef#manipulating-the-dom-with-a-ref) palauttama), voit välittää funktion `ref` attribuuttiin.
 
 ```js
 <div ref={(node) => console.log(node)} />
 ```
 
-[See an example of using the `ref` callback.](/learn/manipulating-the-dom-with-refs#how-to-manage-a-list-of-refs-using-a-ref-callback)
+[Esimerkki `ref` callbackin käytöstä.](/learn/manipulating-the-dom-with-refs#how-to-manage-a-list-of-refs-using-a-ref-callback)
 
-When the `<div>` DOM node is added to the screen, React will call your `ref` callback with the DOM `node` as the argument. When that `<div>` DOM node is removed, React will call your `ref` callback with `null`.
+Kun `<div>` DOM noodi lisätään näytölle, React kutsuu `ref` callbackia DOM `node` argumentilla. Kun `<div>` DOM noodi poistetaan, React kutsuu `ref` callbackia `null` argumentilla.
 
-React will also call your `ref` callback whenever you pass a *different* `ref` callback. In the above example, `(node) => { ... }` is a different function on every render. When your component re-renders, the *previous* function will be called with `null` as the argument, and the *next* function will be called with the DOM node.
+React kutsuu myös `ref` callbackia aina kun välität *erilaisen* `ref` callbackin. Yllä olevassa esimerkissä, `(node) => { ... }` on eri funktio joka renderöinnillä. Kun komponenttisi renderöidään uudelleen, *edellinen* funktio kutsutaan `null` argumentilla, ja *seuraava* funktio kutsutaan DOM nodella.
 
 #### Parametrit {/*ref-callback-parameters*/}
 
-* `node`: A DOM node or `null`. React will pass you the DOM node when the ref gets attached, and `null` when the ref gets detached. Unless you pass the same function reference for the `ref` callback on every render, the callback will get temporarily detached and re-attached during every re-render of the component.
+* `node`: DOM noodi tai `null`. React välittää DOM noden kun ref liitetään, ja `null` kun ref irrotetaan. Ellei välitä samaa funktiota `ref` callbackiin joka renderöinnillä, callback irrotetaan ja liitetään uudelleen jokaisella komponentin renderöinnillä.
 
 #### Palautukset {/*returns*/}
 
-Do not return anything from the `ref` callback.
+Ei palauta mitään `ref` callbackista.
 
 ---
 
-### React event object {/*react-event-object*/}
+### React tapahtumaolio {/*react-event-object*/}
 
-Your event handlers will receive a *React event object.* It is also sometimes known as a "synthetic event".
+Tapahtumakäsittelijäsi vastaanottaa *React tapahtumaolion*. Sitä kutsutaan myös joskus "synteettiseksi tapahtumaksi".
 
 ```js
 <button onClick={e => {
-  console.log(e); // React event object
+  console.log(e); // React tapahtumaolio
 }} />
 ```
 
-It conforms to the same standard as the underlying DOM events, but fixes some browser inconsistencies.
+Se noudattaa samaa standardia kuin taustalla olevat DOM tapahtumat, mutta korjaa joitain selaimen epäjohdonmukaisuuksia.
 
-Some React events do not map directly to the browser's native events. For example in `onMouseLeave`, `e.nativeEvent` will point to a `mouseout` event. The specific mapping is not part of the public API and may change in the future. If you need the underlying browser event for some reason, read it from `e.nativeEvent`.
+Jotkin React tapahtumat eivät mäppäydy suoraan selaimen alkuperäisiin tapahtumiin. Esimerkiksi `onMouseLeave`, `e.nativeEvent` osoittaa `mouseout` tapahtumaan. Tämä mäppäys ei ole osa julkista API:a ja saattaa muuttua tulevaisuudessa. Jos tarvitset taustalla olevan selaimen tapahtuman jostain syystä, lue se `e.nativeEvent` kautta.
 
-#### Properties {/*react-event-object-properties*/}
+#### Ominaisuudet {/*react-event-object-properties*/}
 
-React event objects implement some of the standard [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event) properties:
+React tapahtumaolio toteuttaa joitain standardin [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event) ominaisuuksia:
 
-* [`bubbles`](https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles): A boolean. Returns whether the event bubbles through the DOM. 
-* [`cancelable`](https://developer.mozilla.org/en-US/docs/Web/API/Event/cancelable): A boolean. Returns whether the event can be canceled.
-* [`currentTarget`](https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget): A DOM node. Returns the node to which the current handler is attached in the React tree.
-* [`defaultPrevented`](https://developer.mozilla.org/en-US/docs/Web/API/Event/defaultPrevented): A boolean. Returns whether `preventDefault` was called.
-* [`eventPhase`](https://developer.mozilla.org/en-US/docs/Web/API/Event/eventPhase): A number. Returns which phase the event is currently in.
-* [`isTrusted`](https://developer.mozilla.org/en-US/docs/Web/API/Event/isTrusted): A boolean. Returns whether the event was initiated by user.
-* [`target`](https://developer.mozilla.org/en-US/docs/Web/API/Event/target): A DOM node. Returns the node on which the event has occurred (which could be a distant child).
-* [`timeStamp`](https://developer.mozilla.org/en-US/docs/Web/API/Event/timeStamp): A number. Returns the time when the event occurred.
+* [`bubbles`](https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles): Totuusarvo. Palauttaa kupliiko tapahtuma DOMin läpi.
+* [`cancelable`](https://developer.mozilla.org/en-US/docs/Web/API/Event/cancelable): Totuusarvo. Palauttaa voiko tapahtuman peruuttaa.
+* [`currentTarget`](https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget): DOM noodi. Palauttaa noodin johon nykyinen käsittelijä on liitetty React puussa.
+* [`defaultPrevented`](https://developer.mozilla.org/en-US/docs/Web/API/Event/defaultPrevented): Totuusarvo. Palauttaa onko `preventDefault` kutsuttu.
+* [`eventPhase`](https://developer.mozilla.org/en-US/docs/Web/API/Event/eventPhase): Numero. Palauttaa missä vaiheessa tapahtuma on tällä hetkellä.
+* [`isTrusted`](https://developer.mozilla.org/en-US/docs/Web/API/Event/isTrusted): Totuusarvo. Palauttaa onko tapahtuma käyttäjän aloittama.
+* [`target`](https://developer.mozilla.org/en-US/docs/Web/API/Event/target): DOM noodi. Palauttaa noodin jossa tapahtuma on tapahtunut (joka voi olla kaukainen lapsi).
+* [`timeStamp`](https://developer.mozilla.org/en-US/docs/Web/API/Event/timeStamp): Numero. Palauttaa ajan jolloin tapahtuma tapahtui.
 
-Additionally, React event objects provide these properties:
+Lisäksi, React tapahtumaoliot tarjoavat nämä ominaisuudet:
 
-* `nativeEvent`: A DOM [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event). The original browser event object.
+* `nativeEvent`: DOM [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event). Alkuperäinen selaimen tapahtumaolio.
 
-#### Methods {/*react-event-object-methods*/}
+#### Metodit {/*react-event-object-methods*/}
 
-React event objects implement some of the standard [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event) methods:
+React tapahtumaolio toteuttaa joitain standardin [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event) metodeista:
 
-* [`preventDefault()`](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault): Prevents the default browser action for the event.
-* [`stopPropagation()`](https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation): Stops the event propagation through the React tree.
+* [`preventDefault()`](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault): Estää tapahtuman oletustoiminnon.
+* [`stopPropagation()`](https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation): Estää tapahtuman kuplimisen React puussa.
 
-Additionally, React event objects provide these methods:
+Lisäksi, React tapahtumaoliot tarjoavat nämä metodit:
 
-* `isDefaultPrevented()`: Returns a boolean value indicating whether `preventDefault` was called.
-* `isPropagationStopped()`: Returns a boolean value indicating whether `stopPropagation` was called.
-* `persist()`: Not used with React DOM. With React Native, call this to read event's properties after the event.
-* `isPersistent()`: Not used with React DOM. With React Native, returns whether `persist` has been called.
+* `isDefaultPrevented()`: Palauttaa totuusarvon joka kertoo onko `preventDefault` kutsuttu.
+* `isPropagationStopped()`: Palauttaa totuusarvon joka kertoo onko `stopPropagation` kutsuttu.
+* `persist()`: Ei käytetä React DOMin kanssa. React Nativella, kutsu tätä lukeaksesi tapahtuman ominaisuudet tapahtuman jälkeen.
+* `isPersistent()`: Ei käytetä React DOMin kanssa. React Nativella, palauttaa onko `persist` kutsuttu.
 
 #### Rajoitukset {/*react-event-object-caveats*/}
 
-* The values of `currentTarget`, `eventPhase`, `target`, and `type` reflect the values your React code expects. Under the hood, React attaches event handlers at the root, but this is not reflected in React event objects. For example, `e.currentTarget` may not be the same as the underlying `e.nativeEvent.currentTarget`. For polyfilled events, `e.type` (React event type) may differ from `e.nativeEvent.type` (underlying type).
+* `currentTarget`, `eventPhase`, `target`, ja `type` arvot heijastaa arvoja, joita React koodisi olettaa. Taustalla, React liittää tapahtumakäsittelijät juureen, mutta tätä ei heijasteta React tapahtumaolioissa. Esimerkiksi, `e.currentTarget` ei välttämättä ole sama kuin taustalla oleva `e.nativeEvent.currentTarget`. Polyfillatuissa tapahtumissa, `e.type` (React tapahtuman tyyppi) voi erota `e.nativeEvent.type` (taustalla oleva tyyppi).
 
 ---
 
-### `AnimationEvent` handler function {/*animationevent-handler*/}
+### `AnimationEvent` käsittelijäfunktio {/*animationevent-handler*/}
 
-An event handler type for the [CSS animation](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations) events.
+Tapahtumakäsittelijätyyppi [CSS animaatioiden](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations) -tapahtumiin.
 
 ```js
 <div
@@ -330,16 +330,16 @@ An event handler type for the [CSS animation](https://developer.mozilla.org/en-U
 
 #### Parametrit {/*animationevent-handler-parameters*/}
 
-* `e`: A [React event object](#react-event-object) with these extra [`AnimationEvent`](https://developer.mozilla.org/en-US/docs/Web/API/AnimationEvent) properties:
+* `e`: [React tapahtumaolio](#react-event-object) näillä ylimääräisillä [`AnimationEvent`](https://developer.mozilla.org/en-US/docs/Web/API/AnimationEvent) ominaisuuksilla:
   * [`animationName`](https://developer.mozilla.org/en-US/docs/Web/API/AnimationEvent/animationName)
   * [`elapsedTime`](https://developer.mozilla.org/en-US/docs/Web/API/AnimationEvent/elapsedTime)
   * [`pseudoElement`](https://developer.mozilla.org/en-US/docs/Web/API/AnimationEvent/pseudoElement)
 
 ---
 
-### `ClipboardEvent` handler function {/*clipboadevent-handler*/}
+### `ClipboardEvent` käsittelijäfunktio {/*clipboadevent-handler*/}
 
-An event handler type for the [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API) events.
+Tapahtumakäsittelijätyyppi [Clipboard API] tapahtumiin.
 
 ```js
 <input
@@ -351,15 +351,15 @@ An event handler type for the [Clipboard API](https://developer.mozilla.org/en-U
 
 #### Parametrit {/*clipboadevent-handler-parameters*/}
 
-* `e`: A [React event object](#react-event-object) with these extra [`ClipboardEvent`](https://developer.mozilla.org/en-US/docs/Web/API/ClipboardEvent) properties:
+* `e`: [React tapahtumaolio](#react-event-object) näillä ylimääräisillä [`ClipboardEvent`](https://developer.mozilla.org/en-US/docs/Web/API/ClipboardEvent) ominaisuuksilla:
 
   * [`clipboardData`](https://developer.mozilla.org/en-US/docs/Web/API/ClipboardEvent/clipboardData)
 
 ---
 
-### `CompositionEvent` handler function {/*compositionevent-handler*/}
+### `CompositionEvent` käsittelijäfunktio {/*compositionevent-handler*/}
 
-An event handler type for the [input method editor (IME)](https://developer.mozilla.org/en-US/docs/Glossary/Input_method_editor) events.
+Tapahtumakäsittelijätyyppi [syöttömenetelmän editorin (IME)](https://developer.mozilla.org/en-US/docs/Glossary/Input_method_editor) tapahtumiin.
 
 ```js
 <input
@@ -371,14 +371,14 @@ An event handler type for the [input method editor (IME)](https://developer.mozi
 
 #### Parametrit {/*compositionevent-handler-parameters*/}
 
-* `e`: A [React event object](#react-event-object) with these extra [`CompositionEvent`](https://developer.mozilla.org/en-US/docs/Web/API/CompositionEvent) properties:
+* `e`: [React tapahtumaolio](#react-event-object) näillä ylimääräisillä [`CompositionEvent`](https://developer.mozilla.org/en-US/docs/Web/API/CompositionEvent) ominaisuuksilla:
   * [`data`](https://developer.mozilla.org/en-US/docs/Web/API/CompositionEvent/data)
 
 ---
 
-### `DragEvent` handler function {/*dragevent-handler*/}
+### `DragEvent` käsittelijäfunktio {/*dragevent-handler*/}
 
-An event handler type for the [HTML Drag and Drop API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API) events.
+Tapahtumakäisttelijätyyppi [HTML Drag and Drop API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API) tapahtumiin.
 
 ```js
 <>
@@ -387,7 +387,7 @@ An event handler type for the [HTML Drag and Drop API](https://developer.mozilla
     onDragStart={e => console.log('onDragStart')}
     onDragEnd={e => console.log('onDragEnd')}
   >
-    Drag source
+    Drag lähde
   </div>
 
   <div
@@ -396,17 +396,17 @@ An event handler type for the [HTML Drag and Drop API](https://developer.mozilla
     onDragOver={e => { e.preventDefault(); console.log('onDragOver'); }}
     onDrop={e => console.log('onDrop')}
   >
-    Drop target
+    Drop kohde
   </div>
 </>
 ```
 
 #### Parametrit {/*dragevent-handler-parameters*/}
 
-* `e`: A [React event object](#react-event-object) with these extra [`DragEvent`](https://developer.mozilla.org/en-US/docs/Web/API/DragEvent) properties:
+* `e`: [React tapahtumaolio](#react-event-object) näillä ylimääräisillä [`DragEvent`](https://developer.mozilla.org/en-US/docs/Web/API/DragEvent) ominaisuuksilla:
   * [`dataTransfer`](https://developer.mozilla.org/en-US/docs/Web/API/DragEvent/dataTransfer)
 
-  It also includes the inherited [`MouseEvent`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) properties:
+  Sisältää myös perityt [`MouseEvent`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) ominaisuudet:
 
   * [`altKey`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/altKey)
   * [`button`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button)
@@ -425,16 +425,16 @@ An event handler type for the [HTML Drag and Drop API](https://developer.mozilla
   * [`screenY`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/screenY)
   * [`shiftKey`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/shiftKey)
 
-  It also includes the inherited [`UIEvent`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent) properties:
+  Sisältää myös perityt [`UIEvent`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent) ominaisuudet:
 
   * [`detail`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail)
   * [`view`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/view)
 
 ---
 
-### `FocusEvent` handler function {/*focusevent-handler*/}
+### `FocusEvent` käsittelijäfunktio {/*focusevent-handler*/}
 
-An event handler type for the focus events.
+Tapahtumakäsittelijätyyppi kohdistumisen tapahtumiin.
 
 ```js
 <input
@@ -443,33 +443,33 @@ An event handler type for the focus events.
 />
 ```
 
-[See an example.](#handling-focus-events)
+[Katso esimerkki.](#handling-focus-events)
 
 #### Parametrit {/*focusevent-handler-parameters*/}
 
-* `e`: A [React event object](#react-event-object) with these extra [`FocusEvent`](https://developer.mozilla.org/en-US/docs/Web/API/FocusEvent) properties:
+* `e`: [React tapahtumaolio](#react-event-object) näillä ylimääräisillä [`FocusEvent`](https://developer.mozilla.org/en-US/docs/Web/API/FocusEvent) ominaisuuksilla:
   * [`relatedTarget`](https://developer.mozilla.org/en-US/docs/Web/API/FocusEvent/relatedTarget)
 
-  It also includes the inherited [`UIEvent`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent) properties:
+  Sisältää myös perityt [`UIEvent`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent) ominaisuudet:
 
   * [`detail`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail)
   * [`view`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/view)
 
 ---
 
-### `Event` handler function {/*event-handler*/}
+### `Event` käsittelijäfunktio {/*event-handler*/}
 
-An event handler type for generic events.
+Tapahtumakäsittelijätyyppi yleisiin tapahtumiin.
 
 #### Parametrit {/*event-handler-parameters*/}
 
-* `e`: A [React event object](#react-event-object) with no additional properties.
+* `e`: [React tapahtumaolio](#react-event-object) ilman ylimääräisiä ominaisuuksia.
 
 ---
 
-### `InputEvent` handler function {/*inputevent-handler*/}
+### `InputEvent` käsittelijäfunktio {/*inputevent-handler*/}
 
-An event handler type for the `onBeforeInput` event.
+Tapahtumakäsittelijätyyppi `onBeforeInput` tapahtumalle.
 
 ```js
 <input onBeforeInput={e => console.log('onBeforeInput')} />
@@ -477,14 +477,14 @@ An event handler type for the `onBeforeInput` event.
 
 #### Parametrit {/*inputevent-handler-parameters*/}
 
-* `e`: A [React event object](#react-event-object) with these extra [`InputEvent`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent) properties:
+* `e`: [React tapahtumaolio](#react-event-object) näillä ylimääräisillä [`InputEvent`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent) ominaisuuksilla:
   * [`data`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent/data)
 
 ---
 
-### `KeyboardEvent` handler function {/*keyboardevent-handler*/}
+### `KeyboardEvent` käsittelijäfunktio {/*keyboardevent-handler*/}
 
-An event handler type for keyboard events.
+Tapahtumakäsittelijätyyppi näppäimistötapahtumiin.
 
 ```js
 <input
@@ -493,11 +493,11 @@ An event handler type for keyboard events.
 />
 ```
 
-[See an example.](#handling-keyboard-events)
+[Katso esimerkki.](#handling-keyboard-events)
 
 #### Parametrit {/*keyboardevent-handler-parameters*/}
 
-* `e`: A [React event object](#react-event-object) with these extra [`KeyboardEvent`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) properties:
+* `e`: [React tapahtumaolio](#react-event-object) näillä ylimääräisillä [`KeyboardEvent`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) ominaisuuksilla:
   * [`altKey`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/altKey)
   * [`charCode`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/charCode)
   * [`code`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code)
@@ -512,16 +512,16 @@ An event handler type for keyboard events.
   * [`shiftKey`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/shiftKey)
   * [`which`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/which)
 
-  It also includes the inherited [`UIEvent`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent) properties:
+  Sisältää myös perityt [`UIEvent`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent) ominaisuudet:
 
   * [`detail`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail)
   * [`view`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/view)
 
 ---
 
-### `MouseEvent` handler function {/*mouseevent-handler*/}
+### `MouseEvent` käsittelijäfunktio {/*mouseevent-handler*/}
 
-An event handler type for mouse events.
+Tapahtumakäsittelijätyyppi hiiritapahtumiin.
 
 ```js
 <div
@@ -534,11 +534,11 @@ An event handler type for mouse events.
 />
 ```
 
-[See an example.](#handling-mouse-events)
+[Katso esimerkki.](#handling-mouse-events)
 
 #### Parametrit {/*mouseevent-handler-parameters*/}
 
-* `e`: A [React event object](#react-event-object) with these extra [`MouseEvent`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) properties:
+* `e`: [React tapahtumaolio](#react-event-object) näillä ylimääräisillä [`MouseEvent`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) ominaisuuksilla:
   * [`altKey`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/altKey)
   * [`button`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button)
   * [`buttons`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons)
@@ -556,16 +556,16 @@ An event handler type for mouse events.
   * [`screenY`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/screenY)
   * [`shiftKey`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/shiftKey)
 
-  It also includes the inherited [`UIEvent`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent) properties:
+  Sisältää myös perityt [`UIEvent`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent) ominaisuudet:
 
   * [`detail`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail)
   * [`view`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/view)
 
 ---
 
-### `PointerEvent` handler function {/*pointerevent-handler*/}
+### `PointerEvent` käsittelijäfunktio {/*pointerevent-handler*/}
 
-An event handler type for [pointer events.](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events)
+Tapahtumakäisttelijätyyppi [osoitintapahtumiin.](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events)
 
 ```js
 <div
@@ -577,11 +577,11 @@ An event handler type for [pointer events.](https://developer.mozilla.org/en-US/
 />
 ```
 
-[See an example.](#handling-pointer-events)
+[Katso esimerkki.](#handling-pointer-events)
 
 #### Parametrit {/*pointerevent-handler-parameters*/}
 
-* `e`: A [React event object](#react-event-object) with these extra [`PointerEvent`](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent) properties:
+* `e`: [React tapahtumaolio](#react-event-object) näillä ylimääräisillä [`PointerEvent`](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent) ominaisuuksilla:
   * [`height`](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/height)
   * [`isPrimary`](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/isPrimary)
   * [`pointerId`](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerId)
@@ -593,7 +593,7 @@ An event handler type for [pointer events.](https://developer.mozilla.org/en-US/
   * [`twist`](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/twist)
   * [`width`](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/width)
 
-  It also includes the inherited [`MouseEvent`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) properties:
+  Sisältää myös perityt [`MouseEvent`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) ominaisuudet:
 
   * [`altKey`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/altKey)
   * [`button`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button)
@@ -612,16 +612,16 @@ An event handler type for [pointer events.](https://developer.mozilla.org/en-US/
   * [`screenY`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/screenY)
   * [`shiftKey`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/shiftKey)
 
-  It also includes the inherited [`UIEvent`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent) properties:
+  Sisältää myös perityt [`UIEvent`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent) ominaisuudet:
 
   * [`detail`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail)
   * [`view`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/view)
 
 ---
 
-### `TouchEvent` handler function {/*touchevent-handler*/}
+### `TouchEvent` käsittelijäfunktio {/*touchevent-handler*/}
 
-An event handler type for [touch events.](https://developer.mozilla.org/en-US/docs/Web/API/Touch_events)
+Tapahtumakäsittelijätyyppi [kosketustapahtumiin.](https://developer.mozilla.org/en-US/docs/Web/API/Touch_events)
 
 ```js
 <div
@@ -634,7 +634,7 @@ An event handler type for [touch events.](https://developer.mozilla.org/en-US/do
 
 #### Parametrit {/*touchevent-handler-parameters*/}
 
-* `e`: A [React event object](#react-event-object) with these extra [`TouchEvent`](https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent) properties:
+* `e`: [React tapahtumaolio](#react-event-object) näillä ylimääräisillä [`TouchEvent`](https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent) ominaisuuksilla:
   * [`altKey`](https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/altKey)
   * [`ctrlKey`](https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/ctrlKey)
   * [`changedTouches`](https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/changedTouches)
@@ -644,16 +644,16 @@ An event handler type for [touch events.](https://developer.mozilla.org/en-US/do
   * [`touches`](https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/touches)
   * [`targetTouches`](https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/targetTouches)
   
-  It also includes the inherited [`UIEvent`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent) properties:
+  Sisältää myös perityt [`UIEvent`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent) ominaisuudet:
 
   * [`detail`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail)
   * [`view`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/view)
 
 ---
 
-### `TransitionEvent` handler function {/*transitionevent-handler*/}
+### `TransitionEvent` käsittelijäfunktio {/*transitionevent-handler*/}
 
-An event handler type for the CSS transition events.
+Tapahtumakäsittelijätyyppi CSS siirtymätapahtumiin.
 
 ```js
 <div
@@ -663,16 +663,16 @@ An event handler type for the CSS transition events.
 
 #### Parametrit {/*transitionevent-handler-parameters*/}
 
-* `e`: A [React event object](#react-event-object) with these extra [`TransitionEvent`](https://developer.mozilla.org/en-US/docs/Web/API/TransitionEvent) properties:
+* `e`: [React tapahtumaolio](#react-event-object) näillä ylimääräisillä [`TransitionEvent`](https://developer.mozilla.org/en-US/docs/Web/API/TransitionEvent) ominaisuuksilla:
   * [`elapsedTime`](https://developer.mozilla.org/en-US/docs/Web/API/TransitionEvent/elapsedTime)
   * [`propertyName`](https://developer.mozilla.org/en-US/docs/Web/API/TransitionEvent/propertyName)
   * [`pseudoElement`](https://developer.mozilla.org/en-US/docs/Web/API/TransitionEvent/pseudoElement)
 
 ---
 
-### `UIEvent` handler function {/*uievent-handler*/}
+### `UIEvent` käsittelijäfunktio {/*uievent-handler*/}
 
-An event handler type for generic UI events.
+Tapahtumakäsittelijätyyppi yleisiin käyttöliittymätapahtumiin.
 
 ```js
 <div
@@ -682,15 +682,15 @@ An event handler type for generic UI events.
 
 #### Parametrit {/*uievent-handler-parameters*/}
 
-* `e`: A [React event object](#react-event-object) with these extra [`UIEvent`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent) properties:
+* `e`: [React tapahtumaolio](#react-event-object) näillä ylimääräisillä [`UIEvent`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent) ominaisuuksilla:
   * [`detail`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail)
   * [`view`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/view)
 
 ---
 
-### `WheelEvent` handler function {/*wheelevent-handler*/}
+### `WheelEvent` käsittelijäfunktio {/*wheelevent-handler*/}
 
-An event handler type for the `onWheel` event.
+Tapahtumakäsittelijätyyppi `onWheel` tapahtumalle.
 
 ```js
 <div
@@ -700,14 +700,14 @@ An event handler type for the `onWheel` event.
 
 #### Parametrit {/*wheelevent-handler-parameters*/}
 
-* `e`: A [React event object](#react-event-object) with these extra [`WheelEvent`](https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent) properties:
+* `e`: [React tapahtumaolio](#react-event-object) näillä ylimääräisillä [`WheelEvent`](https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent) ominaisuuksilla:
   * [`deltaMode`](https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent/deltaMode)
   * [`deltaX`](https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent/deltaX)
   * [`deltaY`](https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent/deltaY)
   * [`deltaZ`](https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent/deltaZ)
 
 
-  It also includes the inherited [`MouseEvent`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) properties:
+  Sisältää myös perityt [`MouseEvent`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) ominaisuudet:
 
   * [`altKey`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/altKey)
   * [`button`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button)
@@ -726,7 +726,7 @@ An event handler type for the `onWheel` event.
   * [`screenY`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/screenY)
   * [`shiftKey`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/shiftKey)
 
-  It also includes the inherited [`UIEvent`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent) properties:
+  Sisältää myös perityt [`UIEvent`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent) ominaisuudet:
 
   * [`detail`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail)
   * [`view`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/view)
@@ -735,26 +735,26 @@ An event handler type for the `onWheel` event.
 
 ## Käyttö {/*usage*/}
 
-### Applying CSS styles {/*applying-css-styles*/}
+### CSS tyylien käyttö {/*applying-css-styles*/}
 
-In React, you specify a CSS class with [`className`.](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) It works like the `class` attribute in HTML:
+Reactissa, määrität CSS-luokan [`className`:lla.](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) Se toimii kuten `class` attribuutti HTML:ssä:
 
 ```js
 <img className="avatar" />
 ```
 
-Then you write the CSS rules for it in a separate CSS file:
+Sitten kirjoitat CSS säännöt sille erillisessä CSS tiedostossa:
 
 ```css
-/* In your CSS */
+/* CSS tiedostossasi */
 .avatar {
   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 ei määrää miten lisäät CSS tiedostoja. Yksinkertaisimmassa tapauksessa, lisäät [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) tagin HTML:ään. Jos käytät rakennustyökalua tai frameworkkia, tutustu sen dokumentaatioon oppiaksesi miten lisäät CSS tiedoston projektiisi.
 
-Sometimes, the style values depend on data. Use the `style` attribute to pass some styles dynamically:
+Joskus, tyylien arvot riippuvat datasta. Käytä `style` attribuuttia välittääksesi joitain tyylejä dynaamisesti:
 
 ```js {3-6}
 <img
@@ -767,7 +767,7 @@ Sometimes, the style values depend on data. Use the `style` attribute to pass so
 ```
 
 
-In the above example, `style={{}}` is not a special syntax, but a regular `{}` object inside the `style={ }` [JSX curly braces.](/learn/javascript-in-jsx-with-curly-braces) We recommend only using the `style` attribute when your styles depend on JavaScript variables.
+Ylläolevassa esimerkissä, `style={{}}` ei ole erikoissyntaksi, vaan tavallinen `{}` objekti `style={ }` [JSX aaltosulkeiden](/learn/javascript-in-jsx-with-curly-braces) sisällä. Suosittelemme käyttämään `style` attribuuttia vain silloin kun tyylit riippuvat JavaScript muuttujista.
 
 <Sandpack>
 
@@ -811,13 +811,13 @@ export default function Avatar({ user }) {
 
 <DeepDive>
 
-#### How to apply multiple CSS classes conditionally? {/*how-to-apply-multiple-css-classes-conditionally*/}
+#### Miten käyttää useita CSS-luokkia ehdollisesti? {/*how-to-apply-multiple-css-classes-conditionally*/}
 
-To apply CSS classes conditionally, you need to produce the `className` string yourself using JavaScript.
+Määrittääksesi CSS luokkia ehdollisesti, sinun täytyy tuottaa `className` merkkijono itse käyttäen JavaScriptiä.
 
-For example, `className={'row ' + (isSelected ? 'selected': '')}` will produce either `className="row"` or `className="row selected"` depending on whether `isSelected` is `true`.
+Esimerkiksi, `className={'row ' + (isSelected ? 'selected': '')}` tuottaa joko `className="row"` tai `className="row selected"` riippuen siitä onko `isSelected` `true`.
 
-To make this more readable, you can use a tiny helper library like [`classnames`:](https://github.com/JedWatson/classnames)
+Tehdäksesi tästä luettavamman, voit käyttää pientä apukirjastoa kuten [`classnames`:](https://github.com/JedWatson/classnames)
 
 ```js
 import cn from 'classnames';
@@ -831,7 +831,7 @@ function Row({ isSelected }) {
 }
 ```
 
-It is especially convenient if you have multiple conditional classes:
+Se on erityisen kätevää jos sinulla on useita ehdollisia luokkia:
 
 ```js
 import cn from 'classnames';
@@ -853,9 +853,9 @@ function Row({ isSelected, size }) {
 
 ---
 
-### Manipulating a DOM node with a ref {/*manipulating-a-dom-node-with-a-ref*/}
+### DOM elemetin manipuolinti refillä {/*manipulating-a-dom-node-with-a-ref*/}
 
-Sometimes, you'll need to get the browser DOM node associated with a tag in JSX. For example, if you want to focus an `<input>` when a button is clicked, you need to call [`focus()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus) on the browser `<input>` DOM node.
+Joskus sinun täytyy saada selaimen DOM noodi joka on yhdistetty JSX tagiin. Esimerkiksi, jos haluat kohdistaa `<input>`:iin kun painiketta painetaan, sinun täytyy kutsua [`focus()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus) selaimen `<input>` DOM noodilla.
 
 To obtain the browser DOM node for a tag, [declare a ref](/reference/react/useRef) and pass it as the `ref` attribute to that tag:
 
@@ -870,7 +870,7 @@ export default function Form() {
     // ...
 ```
 
-React will put the DOM node into `inputRef.current` after it's been rendered to the screen.
+React asettaa DOM noodin `inputRef.current`:iin kun se on renderöity näytölle.
 
 <Sandpack>
 
@@ -897,24 +897,24 @@ export default function Form() {
 
 </Sandpack>
 
-Read more about [manipulating DOM with refs](/learn/manipulating-the-dom-with-refs) and [check out more examples.](/reference/react/useRef#examples-dom)
+Lue lisää [DOM manipuloinnista refien avulla](/learn/manipulating-the-dom-with-refs) ja [katso lisää esimerkkejä.](/reference/react/useRef#examples-dom)
 
-For more advanced use cases, the `ref` attribute also accepts a [callback function.](#ref-callback)
+Kehittyneempiin käyttötapauksiin, `ref` attribuutti hyväksyy myös [takaisinkutsufunktion.](#ref-callback)
 
 ---
 
-### Dangerously setting the inner HTML {/*dangerously-setting-the-inner-html*/}
+### Sisäisen HTML sisällön asettaminen vaarallisesti {/*dangerously-setting-the-inner-html*/}
 
-You can pass a raw HTML string to an element like so:
+Voit välittää raakaa HTML merkkijonoa elementille näin:
 
 ```js
 const markup = { __html: '<p>some raw html</p>' };
 return <div dangerouslySetInnerHTML={markup} />;
 ```
 
-**This is dangerous. As with the underlying DOM [`innerHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML) property, you must exercise extreme caution! Unless the markup is coming from a completely trusted source, it is trivial to introduce an [XSS](https://en.wikipedia.org/wiki/Cross-site_scripting) vulnerability this way.**
+**Tämä on vaarallista. Kuten DOM:n [`innerHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML) ominaisuudella, sinun täytyy olla erittäin varovainen! Ellei merkintä tule täysin luotettavasta lähteestä, on triviaalia aiheuttaa [XSS](https://en.wikipedia.org/wiki/Cross-site_scripting) haavoittuvuus tällä tavalla.**
 
-For example, if you use a Markdown library that converts Markdown to HTML, you trust that its parser doesn't contain bugs, and the user only sees their own input, you can display the resulting HTML like this:
+Esimerkiksi, jos käytät Markdown kirjastoa joka muuntaa Markdownia HTML:ksi, luotat että sen parseri ei sisällä bugeja, ja käyttäjä näkee vain oman syötteen, voit näyttää tuloksena olevan HTML:n näin:
 
 <Sandpack>
 
@@ -946,9 +946,9 @@ import { Remarkable } from 'remarkable';
 const md = new Remarkable();
 
 function renderMarkdownToHTML(markdown) {
-  // This is ONLY safe because the output HTML
-  // is shown to the same user, and because you
-  // trust this Markdown parser to not have bugs.
+  // Tämä on turvallista VAIN koska HTML näytetään
+  // samalle käyttäjälle, ja koska luotat tämän
+  // Markdown parserin oelvan bugivapaa.
   const renderedHTML = md.render(markdown);
   return {__html: renderedHTML};
 }
@@ -982,28 +982,28 @@ textarea { display: block; margin-top: 5px; margin-bottom: 10px; }
 
 </Sandpack>
 
-To see why rendering arbitrary HTML is dangerous, replace the code above with this:
+Nähdäksesi miksi mielivaltaisen HTML renderöiminen on vaarallista, korvaa ylläoleva koodi tällä:
 
 ```js {1-4,7,8}
 const post = {
-  // Imagine this content is stored in the database.
-  content: `<img src="" onerror='alert("you were hacked")'>`
+  // Kuvittele tämä sisältö tallennettuna tietokantaan.
+  content: `<img src="" onerror='alert("sinut häkkeröitiin")'>`
 };
 
 export default function MarkdownPreview() {
-  // 🔴 SECURITY HOLE: passing untrusted input to dangerouslySetInnerHTML
+  // 🔴 TIETOTURVA-AUKKO: luotettamattoman syötteen välittäminen dangerouslySetInnerHTML:lle
   const markup = { __html: post.content };
   return <div dangerouslySetInnerHTML={markup} />;
 }
 ```
 
-The code embedded in the HTML will run. A hacker could use this security hole to steal user information or to perform actions on their behalf. **Only use `dangerouslySetInnerHTML` with trusted and sanitized data.**
+Koodi upotettuna HTML:ssä suoritetaan. Hakkeri voisi käyttää tätä tietoturva-aukkoa varastaakseen käyttäjän tietoja tai suorittaakseen toimia heidän puolestaan. **Käytä `dangerouslySetInnerHTML`:ää vain luotettavan ja puhdistetun datan kanssa.**
 
 ---
 
-### Handling mouse events {/*handling-mouse-events*/}
+### Hiiren tapahtumien käsitteleminen {/*handling-mouse-events*/}
 
-This example shows some common [mouse events](#mouseevent-handler) and when they fire.
+Tämä esimerkki näyttää joitain yleisiä [hiiritapahtumia](#mouseevent-handler) ja milloin ne suoritetaan.
 
 <Sandpack>
 
@@ -1015,24 +1015,24 @@ export default function MouseExample() {
       onMouseLeave={e => console.log('onMouseLeave (parent)')}
     >
       <button
-        onClick={e => console.log('onClick (first button)')}
-        onMouseDown={e => console.log('onMouseDown (first button)')}
-        onMouseEnter={e => console.log('onMouseEnter (first button)')}
-        onMouseLeave={e => console.log('onMouseLeave (first button)')}
-        onMouseOver={e => console.log('onMouseOver (first button)')}
-        onMouseUp={e => console.log('onMouseUp (first button)')}
+        onClick={e => console.log('onClick (ensimmäinen painike)')}
+        onMouseDown={e => console.log('onMouseDown (ensimmäinen painike)')}
+        onMouseEnter={e => console.log('onMouseEnter (ensimmäinen painike)')}
+        onMouseLeave={e => console.log('onMouseLeave (ensimmäinen painike)')}
+        onMouseOver={e => console.log('onMouseOver (ensimmäinen painike)')}
+        onMouseUp={e => console.log('onMouseUp (ensimmäinen painike)')}
       >
-        First button
+        Ensimmäinen painike
       </button>
       <button
-        onClick={e => console.log('onClick (second button)')}
-        onMouseDown={e => console.log('onMouseDown (second button)')}
-        onMouseEnter={e => console.log('onMouseEnter (second button)')}
-        onMouseLeave={e => console.log('onMouseLeave (second button)')}
-        onMouseOver={e => console.log('onMouseOver (second button)')}
-        onMouseUp={e => console.log('onMouseUp (second button)')}
+        onClick={e => console.log('onClick (toinen painike)')}
+        onMouseDown={e => console.log('onMouseDown (toinen painike)')}
+        onMouseEnter={e => console.log('onMouseEnter (toinen painike)')}
+        onMouseLeave={e => console.log('onMouseLeave (toinen painike)')}
+        onMouseOver={e => console.log('onMouseOver (toinen painike)')}
+        onMouseUp={e => console.log('onMouseUp (toinen painike)')}
       >
-        Second button
+        Toinen painike
       </button>
     </div>
   );
@@ -1048,9 +1048,9 @@ input { margin-left: 10px; }
 
 ---
 
-### Handling pointer events {/*handling-pointer-events*/}
+### Osoittimen tapahtumien käsitteleminen {/*handling-pointer-events*/}
 
-This example shows some common [pointer events](#pointerevent-handler) and when they fire.
+Tämä esimerkki näyttää joitain yleisiä [osoitintapahtumia](#pointerevent-handler) ja milloin ne suoritetaan.
 
 <Sandpack>
 
@@ -1063,24 +1063,24 @@ export default function PointerExample() {
       style={{ padding: 20, backgroundColor: '#ddd' }}
     >
       <div
-        onPointerDown={e => console.log('onPointerDown (first child)')}
-        onPointerEnter={e => console.log('onPointerEnter (first child)')}
-        onPointerLeave={e => console.log('onPointerLeave (first child)')}
-        onPointerMove={e => console.log('onPointerMove (first child)')}
-        onPointerUp={e => console.log('onPointerUp (first child)')}
+        onPointerDown={e => console.log('onPointerDown (ensimmäinen lapsi)')}
+        onPointerEnter={e => console.log('onPointerEnter (ensimmäinen lapsi)')}
+        onPointerLeave={e => console.log('onPointerLeave (ensimmäinen lapsi)')}
+        onPointerMove={e => console.log('onPointerMove (ensimmäinen lapsi)')}
+        onPointerUp={e => console.log('onPointerUp (ensimmäinen lapsi)')}
         style={{ padding: 20, backgroundColor: 'lightyellow' }}
       >
-        First child
+        Ensimmäinen lapsi
       </div>
       <div
-        onPointerDown={e => console.log('onPointerDown (second child)')}
-        onPointerEnter={e => console.log('onPointerEnter (second child)')}
-        onPointerLeave={e => console.log('onPointerLeave (second child)')}
-        onPointerMove={e => console.log('onPointerMove (second child)')}
-        onPointerUp={e => console.log('onPointerUp (second child)')}
+        onPointerDown={e => console.log('onPointerDown (toinen lapsi)')}
+        onPointerEnter={e => console.log('onPointerEnter (toinen lapsi)')}
+        onPointerLeave={e => console.log('onPointerLeave (toinen lapsi)')}
+        onPointerMove={e => console.log('onPointerMove (toinen lapsi)')}
+        onPointerUp={e => console.log('onPointerUp (toinen lapsi)')}
         style={{ padding: 20, backgroundColor: 'lightblue' }}
       >
-        Second child
+        Toinen lapsi
       </div>
     </div>
   );
@@ -1096,9 +1096,9 @@ input { margin-left: 10px; }
 
 ---
 
-### Handling focus events {/*handling-focus-events*/}
+### Kohdennustapahtumien käsitteleminen {/*handling-focus-events*/}
 
-In React, [focus events](#focusevent-handler) bubble. You can use the `currentTarget` and `relatedTarget` to differentiate if the focusing or blurring events originated from outside of the parent element. The example shows how to detect focusing a child, focusing the parent element, and how to detect focus entering or leaving the whole subtree.
+Reactissa, [kohdennustapahtumat](#focusevent-handler) kuplivat. Voit käyttää `currentTarget` ja `relatedTarget` erottaaksesi onko kohdennus peräisin ulkopuolelta vai ei. Esimerkki näyttää miten havaita lapsen kohdennustapahtuma, vanhemman kohdennustapahtuma, ja miten havaita kohdennuksen tuleminen tai lähteminen koko alipuusta.
 
 <Sandpack>
 
@@ -1114,7 +1114,7 @@ export default function FocusExample() {
           console.log('focused child', e.target.name);
         }
         if (!e.currentTarget.contains(e.relatedTarget)) {
-          // Not triggered when swapping focus between children
+          // Ei suoritettu kun vaihdetaan kohdennusta lasten välillä
           console.log('focus entered parent');
         }
       }}
@@ -1125,17 +1125,17 @@ export default function FocusExample() {
           console.log('unfocused child', e.target.name);
         }
         if (!e.currentTarget.contains(e.relatedTarget)) {
-          // Not triggered when swapping focus between children
+          // Ei suoritettu kun vaihdetaan kohdennusta lasten välillä
           console.log('focus left parent');
         }
       }}
     >
       <label>
-        First name:
+        Etunimi:
         <input name="firstName" />
       </label>
       <label>
-        Last name:
+        Sukunimi:
         <input name="lastName" />
       </label>
     </div>
@@ -1152,9 +1152,9 @@ input { margin-left: 10px; }
 
 ---
 
-### Handling keyboard events {/*handling-keyboard-events*/}
+### Näppäimistötapahtumien käsitteleminen {/*handling-keyboard-events*/}
 
-This example shows some common [keyboard events](#keyboardevent-handler) and when they fire.
+Tämä esimerkki näyttää joitain yleisiä [näppäimistötapahtumia](#keyboardevent-handler) ja milloin ne suoritetaan.
 
 <Sandpack>
 
@@ -1162,7 +1162,7 @@ This example shows some common [keyboard events](#keyboardevent-handler) and whe
 export default function KeyboardExample() {
   return (
     <label>
-      First name:
+      Etunimi:
       <input
         name="firstName"
         onKeyDown={e => console.log('onKeyDown:', e.key, e.code)}
diff --git a/src/content/reference/react-dom/components/index.md b/src/content/reference/react-dom/components/index.md
index 877ff97fc..98b3e47cc 100644
--- a/src/content/reference/react-dom/components/index.md
+++ b/src/content/reference/react-dom/components/index.md
@@ -1,40 +1,40 @@
 ---
-title: "React DOM Components"
+title: "React DOM komponentit"
 ---
 
 <Intro>
 
-React supports all of the browser built-in [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) and [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG/Element) components.
+React tukee kaikkia selaimen sisäänrakennettuja [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) ja [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG/Element) komponentteja.
 
 </Intro>
 
 ---
 
-## Common components {/*common-components*/}
+## Yleiset komponentit {/*common-components*/}
 
-All of the built-in browser components support some props and events.
+Kaikki selaimen sisäänrakennetut komponentit tukevat joitain propseja ja tapahtumia.
 
-* [Common components (e.g. `<div>`)](/reference/react-dom/components/common)
+* [Yleiset komponentit (kuten `<div>`)](/reference/react-dom/components/common)
 
-This includes React-specific props like `ref` and `dangerouslySetInnerHTML`.
+Tämä sisältää myös Reactin omat propsit, kuten `ref` ja `dangerouslySetInnerHTML`.
 
 ---
 
-## Form components {/*form-components*/}
+## Lomakekomponentit {/*form-components*/}
 
-These built-in browser components accept user input:
+Nämä selaimen sisäänrakennetut komponentit hyväksyvät käyttäjän syötteen:
 
 * [`<input>`](/reference/react-dom/components/input)
 * [`<select>`](/reference/react-dom/components/select)
 * [`<textarea>`](/reference/react-dom/components/textarea)
 
-They are special in React because passing the `value` prop to them makes them *[controlled.](/reference/react-dom/components/input#controlling-an-input-with-a-state-variable)*
+Ne ovat erityisiä Reactissa, koska `value`-propsin antaminen niille tekee niistä *[kontrolloituja.](/reference/react-dom/components/input#controlling-an-input-with-a-state-variable)*
 
 ---
 
-## All HTML components {/*all-html-components*/}
+## Kaikki HTML komponentit {/*all-html-components*/}
 
-React supports all built-in browser HTML components. This includes:
+React tukee kaikkia selaimen sisäänrakennettuja HTML komponentteja. Tämä sisältää:
 
 * [`<aside>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside)
 * [`<audio>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio)
@@ -140,38 +140,38 @@ React supports all built-in browser HTML components. This includes:
 
 <Note>
 
-Similar to the [DOM standard,](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) React uses a `camelCase` convention for prop names. For example, you'll write `tabIndex` instead of `tabindex`. You can convert existing HTML to JSX with an [online converter.](https://transform.tools/html-to-jsx)
+Vastaavasti kuten [DOM standardissa,](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) React käyttää `camelCase`-konventiota propsien nimissä. Esimerkiksi, kirjoitat `tabIndex` sen sijaan, että kirjoittaisit `tabindex`. Voit muuntaa olemassaolevaa HTML:ää JSX:ksi [verkkokonvertterilla.](https://transform.tools/html-to-jsx)
 
 </Note>
 
 ---
 
-### Custom HTML elements {/*custom-html-elements*/}
+### Mukautetut HTML elementit {/*custom-html-elements*/}
 
-If you render a tag with a dash, like `<my-element>`, React will assume you want to render a [custom HTML element.](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) In React, rendering custom elements works differently from rendering built-in browser tags:
+Jos renderöit tagin, jossa on viiva, kuten `<my-element>`, React olettaa, että haluat renderöidä [mukautetun HTML elementin.](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) Reactissa, mukautetun elementin renderöinti toimii eri tavalla kuin selaimen sisäänrakennetun tagin renderöinti:
 
-- All custom element props are serialized to strings and are always set using attributes.
-- Custom elements accept `class` rather than `className`, and `for` rather than `htmlFor`.
+- Kaikki mukautetun elementin propsit serialisoidaan merkkijonoiksi ja asetetaan aina attribuutteina.
+- Mukautetut elementit hyväksyvät `class`-propsin sijaan `className`-propsin, ja `for`-propsin sijaan `htmlFor`-propsin.
 
-If you render a built-in browser HTML element with an [`is`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/is) attribute, it will also be treated as a custom element.
+Jos renderöit selaimen sisäänrakennetun HTML elementin [`is`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/is) attribuutilla, se käsitellään myös mukautettuna elementtinä.
 
 <Note>
 
-[A future version of React will include more comprehensive support for custom elements.](https://github.com/facebook/react/issues/11347#issuecomment-1122275286)
+[Tulevaisuuden versio Reactista sisältää kattavamman tuen mukautetuille elementeille.](https://github.com/facebook/react/issues/11347#issuecomment-1122275286)
 
-You can try it by upgrading React packages to the most recent experimental version:
+Voit kokeilla sitä päivittämällä React paketit uusimpaan kokeelliseen versioon:
 
 - `react@experimental`
 - `react-dom@experimental`
 
-Experimental versions of React may contain bugs. Don't use them in production.
+Kokeelliset versiot Reactista saattavat sisältää bugeja. Älä käytä niitä tuotannossa.
 
 </Note>
 ---
 
-## All SVG components {/*all-svg-components*/}
+## Kaikki SVG komponentit {/*all-svg-components*/}
 
-React supports all built-in browser SVG components. This includes:
+React tukee kaikkia selaimen sisäänrakennettuja SVG komponentteja. Tämä sisältää:
 
 * [`<a>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/a)
 * [`<animate>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animate)
@@ -242,20 +242,20 @@ React supports all built-in browser SVG components. This includes:
 
 <Note>
 
-Similar to the [DOM standard,](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) React uses a `camelCase` convention for prop names. For example, you'll write `tabIndex` instead of `tabindex`. You can convert existing SVG to JSX with an [online converter.](https://transform.tools/)
-
-Namespaced attributes also have to be written without the colon:
-
-* `xlink:actuate` becomes `xlinkActuate`.
-* `xlink:arcrole` becomes `xlinkArcrole`.
-* `xlink:href` becomes `xlinkHref`.
-* `xlink:role` becomes `xlinkRole`.
-* `xlink:show` becomes `xlinkShow`.
-* `xlink:title` becomes `xlinkTitle`.
-* `xlink:type` becomes `xlinkType`.
-* `xml:base` becomes `xmlBase`.
-* `xml:lang` becomes `xmlLang`.
-* `xml:space` becomes `xmlSpace`.
-* `xmlns:xlink` becomes `xmlnsXlink`.
+Vastaaavasti kuten [DOM standardissa,](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) React käyttää `camelCase`-konventiota propsien nimissä. Esimerkiksi, kirjoitat `tabIndex` sen sijaan, että kirjoittaisit `tabindex`. Voit muuntaa olemassaolevaa SVG:ää JSX:ksi [verkkokonvertterilla.](https://transform.tools/)
+
+Attribuutit nimitilalla täytyy myös kirjoittaa ilman kaksoispistettä:
+
+* `xlink:actuate` tulee `xlinkActuate`.
+* `xlink:arcrole` tulee `xlinkArcrole`.
+* `xlink:href` tulee `xlinkHref`.
+* `xlink:role` tulee `xlinkRole`.
+* `xlink:show` tulee `xlinkShow`.
+* `xlink:title` tulee `xlinkTitle`.
+* `xlink:type` tulee `xlinkType`.
+* `xml:base` tulee `xmlBase`.
+* `xml:lang` tulee `xmlLang`.
+* `xml:space` tulee `xmlSpace`.
+* `xmlns:xlink` tulee `xmlnsXlink`.
 
 </Note>
diff --git a/src/content/reference/react-dom/components/input.md b/src/content/reference/react-dom/components/input.md
index 045115fe1..e34fddce0 100644
--- a/src/content/reference/react-dom/components/input.md
+++ b/src/content/reference/react-dom/components/input.md
@@ -4,7 +4,7 @@ title: "<input>"
 
 <Intro>
 
-The [built-in browser `<input>` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) lets you render different kinds of form inputs.
+[Selaimen sisäänrakennettu `<input>`-komponentti](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) mahdollistaa erilaisten lomakkeiden syöttökenttien renderöinnin.
 
 ```js
 <input />
@@ -20,88 +20,87 @@ The [built-in browser `<input>` component](https://developer.mozilla.org/en-US/d
 
 ### `<input>` {/*input*/}
 
-To display an input, render the [built-in browser `<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) component.
+Näyttääksesi syöttökentän, renderöi [selaimen sisäänrakennettu `<input>`-komponentti.](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input)
 
 ```js
 <input name="myInput" />
 ```
 
-[See more examples below.](#usage)
+[Näe lisää esimerkkejä alla.](#usage)
 
 #### Propsit {/*props*/}
 
-`<input>` supports all [common element props.](/reference/react-dom/components/common#props)
-
-You can [make an input controlled](#controlling-an-input-with-a-state-variable) by passing one of these props:
-
-* [`checked`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#checked): A boolean. For a checkbox input or a radio button, controls whether it is selected.
-* [`value`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#value): A string. For a text input, controls its text. (For a radio button, specifies its form data.)
-
-When you pass either of them, you must also pass an `onChange` handler that updates the passed value.
-
-These `<input>` props are only relevant for uncontrolled inputs:
-
-* [`defaultChecked`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#defaultChecked): A boolean. Specifies [the initial value](#providing-an-initial-value-for-an-input) for `type="checkbox"` and `type="radio"` inputs.
-* [`defaultValue`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#defaultValue): A string. Specifies [the initial value](#providing-an-initial-value-for-an-input) for a text input.
-
-These `<input>` props are relevant both for uncontrolled and controlled inputs:
-
-* [`accept`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#accept): A string. Specifies which filetypes are accepted by a `type="file"` input.
-* [`alt`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#alt): A string. Specifies the alternative image text for a `type="image"` input.
-* [`capture`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#capture): A string. Specifies the media (microphone, video, or camera) captured by a `type="file"` input.
-* [`autoComplete`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#autocomplete): A string. Specifies one of the possible [autocomplete behaviors.](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values)
-* [`autoFocus`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#autofocus): A boolean. If `true`, React will focus the element on mount.
-* [`dirname`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#dirname): A string. Specifies the form field name for the element's directionality.
-* [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled): A boolean. If `true`, the input will not be interactive and will appear dimmed.
-* `children`: `<input>` does not accept children.
-* [`form`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#form): A string. Specifies the `id` of the `<form>` this input belongs to. If omitted, it's the closest parent form.
-* [`formAction`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#formaction): A string. Overrides the parent `<form action>` for `type="submit"` and `type="image"`.
-* [`formEnctype`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#formenctype): A string. Overrides the parent `<form enctype>` for `type="submit"` and `type="image"`.
-* [`formMethod`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#formmethod): A string. Overrides the parent `<form method>` for `type="submit"` and `type="image"`.
-* [`formNoValidate`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#formnovalidate): A string. Overrides the parent `<form noValidate>` for `type="submit"` and `type="image"`.
-* [`formTarget`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#formtarget): A string. Overrides the parent `<form target>` for `type="submit"` and `type="image"`.
-* [`height`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#height): A string. Specifies the image height for `type="image"`.
-* [`list`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#list): A string. Specifies the `id` of the `<datalist>` with the autocomplete options.
-* [`max`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#max): A number. Specifies the maximum value of numerical and datetime inputs.
-* [`maxLength`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength): A number. Specifies the maximum length of text and other inputs.
-* [`min`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min): A number. Specifies the minimum value of numerical and datetime inputs.
-* [`minLength`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength): A number. Specifies the minimum length of text and other inputs.
-* [`multiple`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#multiple): A boolean. Specifies whether multiple values are allowed for `<type="file"` and `type="email"`.
-* [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name): A string. Specifies the name for this input that's [submitted with the form.](#reading-the-input-values-when-submitting-a-form)
-* `onChange`: An [`Event` handler](/reference/react-dom/components/common#event-handler) function. Required for [controlled inputs.](#controlling-an-input-with-a-state-variable) Fires immediately when the input's value is changed by the user (for example, it fires on every keystroke). Behaves like the browser [`input` event.](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event)
-* `onChangeCapture`: A version of `onChange` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`onInput`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event): An [`Event` handler](/reference/react-dom/components/common#event-handler) function. Fires immediately when the value is changed by the user. For historical reasons, in React it is idiomatic to use `onChange` instead which works similarly.
-* `onInputCapture`: A version of `onInput` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`onInvalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event): An [`Event` handler](/reference/react-dom/components/common#event-handler) function. Fires if an input fails validation on form submit. Unlike the built-in `invalid` event, the React `onInvalid` event bubbles.
-* `onInvalidCapture`: A version of `onInvalid` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`onSelect`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select_event): An [`Event` handler](/reference/react-dom/components/common#event-handler) function. Fires after the selection inside the `<input>` changes. React extends the `onSelect` event to also fire for empty selection and on edits (which may affect the selection).
-* `onSelectCapture`: A version of `onSelect` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`pattern`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#pattern): A string. Specifies the pattern that the `value` must match.
-* [`placeholder`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder): A string. Displayed in a dimmed color when the input value is empty.
-* [`readOnly`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#readonly): A boolean. If `true`, the input is not editable by the user.
-* [`required`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#required): A boolean. If `true`, the value must be provided for the form to submit.
-* [`size`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#size): A number. Similar to setting width, but the unit depends on the control.
-* [`src`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#src): A string. Specifies the image source for a `type="image"` input.
-* [`step`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#step): A positive number or an `'any'` string. Specifies the distance between valid values.
-* [`type`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#type): A string. One of the [input types.](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types)
-* [`width`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#width):  A string. Specifies the image width for a `type="image"` input.
+`<input>` tukee kaikkia [yleisten elementtien propseja.](/reference/react-dom/components/common#props)
+
+Voit [tehdä syöttökentästä kontrolloidun](#controlling-an-input-with-a-state-variable) antamalla yhden näistä propseista:
+
+* [`checked`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#checked): Totuusarvo. Valintaruudun tai radiopainikkeen kohdalla, kontrolloi onko se valittu.
+* [`value`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#value): Merkkijono. Tekstikentän kohdalla, kontrolloi sen tekstiä. (Radiopainikkeen kohdalla, määrittää sen lomakedatan.)
+
+Kun käytät `<input>`-komponenttia kontrolloidun syöttökentän kanssa, sinun täytyy myös antaa `onChange`-käsittelijäfunktio, joka päivittää `value`-arvon.
+
+Nämä `<input>`-propit ovat olennaisia vain kontrolloimattomille syöttökentille:
+
+* [`defaultChecked`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#defaultChecked): Totuusarvo. Määrittää [alkuarvon](#providing-an-initial-value-for-an-input) `type="checkbox"` ja `type="radio"`-syöttökentille.
+* [`defaultValue`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#defaultValue): Merkkijono. Määrittää [alkuarvon](#providing-an-initial-value-for-an-input) tekstisyöttökentälle.
+
+Nämä `<input>`-propsit ovat olennaisia sekä kontrolloimattomille että kontrolloiduille syöttökentille:
+
+* [`accept`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#accept): Merkkijono. Määrittää mitä tiedostotyyppejä hyväksytään `type="file"`-kentällä.
+* [`alt`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#alt): Merkkijono. Määrittää vaihtoehtoisen kuvatekstin `type="image"`-kentälle.
+* [`capture`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#capture): Merkkijono. Määrittää median (mikrofoni, video, tai kamera) joka tallennetaan `type="file"`-kentällä.
+* [`autoComplete`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#autocomplete): Merkkijono. Määrittää yhden mahdollisista [autocomplete-käyttäytymisistä.](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values)
+* [`autoFocus`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#autofocus): Totuusarvo. Jos `true`, React kohdistaa elementtiin mountatessa.
+* [`dirname`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#dirname): Merkkijono. Määrittää elementin suunnan lomakkeen kentän nimen.
+* [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled): Totuusarvo. Jos `true`, syöttökenttä ei ole interaktiivinen ja näkyy himmennettynä.
+* [`form`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#form): Merkkijono. Määrittää `<form>` lomakkeen `id` :n johon tämä kenttä kuuluu. Jos jätetty pois, se on lähin ylätason lomake.
+* [`formAction`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#formaction): Merkkijono. Ylikirjoittaa ylätason `<form action>`-arvon `type="submit"` ja `type="image"`-kentille.
+* [`formEnctype`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#formenctype): Merkkijono. Ylikirjoittaa ylätason `<form enctype>`-arvon `type="submit"` ja `type="image"`-kentille.
+* [`formMethod`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#formmethod): Merkkijono. Ylikirjoittaa ylätason `<form method>`-arvon `type="submit"` ja `type="image"`-kentille.
+* [`formNoValidate`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#formnovalidate): Merkkijono. Ylikirjoittaa ylätason `<form noValidate>`-arvon `type="submit"` ja `type="image"`-kentille.
+* [`formTarget`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#formtarget): Merkkijono. Ylikirjoittaa ylätason `<form target>`-arvon `type="submit"` ja `type="image"`-kentille.
+* [`height`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#height): Merkkijono. Määrittää kuvan korkeuden `type="image"`-kentälle.
+* [`list`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#list): Merkkijono. Määrittää `<datalist>`-elementin `id`:n, jossa on autocomplete-vaihtoehdot.
+* [`max`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#max): Numero. Määrittää numeeristen ja päivämääräkenttien maksimiarvon.
+* [`maxLength`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength): Numero. Määrittää tekstin ja muiden syöttökenttien maksimipituuden.
+* [`min`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min): Numero. Määrittää numeeristen ja päivämääräkenttien minimiarvon.
+* [`minLength`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength): Numero. Määrittää tekstin ja muiden syöttökenttien minimipituuden.
+* [`multiple`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#multiple): Totuusarvo. Määrittää onko useita arvoja sallittu `type="file"` ja `type="email"`-kentille.
+* [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name): Merkkijono. Määrittää nimen tälle kentälle, joka [lähetetään lomakkeessa.](#reading-the-input-values-when-submitting-a-form)
+* `onChange`: [`Event` käsittelijäfunktio](/reference/react-dom/components/common#event-handler). Vaaditaan [kontrolloituihin kenttiin.](#controlling-an-input-with-a-state-variable) Suoritetaan heti kun käyttäjä muuttaa kentän arvoa (esimerkiksi, suoritetaan jokaisella näppäinpainalluksella). Käyttäytyy kuten selaimen [`input` tapahtuma.](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event)
+* `onChangeCapture`: Versio `onChange`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+* [`onInput`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event): [`Event` käsittelijäfunktio](/reference/react-dom/components/common#event-handler). Suoritetaan heti kun käyttäjä muuttaa kentän arvoa. Historiallisista syistä, Reactissa on idiomaattista käyttää tämän tilalla `onChange`, joka toimii samanlaisesti.
+* `onInputCapture`: Versio `onInput`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+* [`onInvalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event): [`Event` käsittelijäfunktio](/reference/react-dom/components/common#event-handler). Suoritetaan jos syöttökenttä epäonnistuu lomakkeen lähetyksessä. Toisin kuin selaimen sisäänrakennettu `invalid`-tapahtuma, Reactin `onInvalid`-tapahtuma kuplii.
+* `onInvalidCapture`: Versio `onInvalid`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+* [`onSelect`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select_event): [`Event` käsittelijäfunktio](/reference/react-dom/components/common#event-handler). Suoritetaan kun valinta `<input>`-elementissä muuttuu. React laajentaa `onSelect`-tapahtuman myös tyhjälle valinnalle ja muokkauksille (jotka voivat vaikuttaa valintaan).
+* `onSelectCapture`: Versio `onSelect`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+* [`pattern`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#pattern): Merkkijono. Määrittää mallin, joka `value`:n täytyy täyttää.
+* [`placeholder`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder): Merkkijono. Näytetään himmennettynä kun syöttökentän arvo on tyhjä.
+* [`readOnly`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#readonly): Totuusarvo. Jos `true`, syöttökenttä ei ole muokattavissa käyttäjän toimesta.
+* [`required`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#required): Totuusarvo. Jos `true`, arvo täytyy antaa lomakkeen lähetyksessä.
+* [`size`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#size): Numero. Samanlainen kuin leveyden määrittäminen, mutta yksikkö riippuu kontrollista.
+* [`src`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#src): Merkkijono. Määrittää kuvan lähteen `type="image"`-kentälle.
+* [`step`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#step): Positiivinen numero tai `'any'`-merkkijono. Määrittää etäisyyden kelvollisten arvojen välillä.
+* [`type`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#type): Merkkijono. Yksi [syöttökenttien tyypeistä.](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types)
+* [`width`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#width):  Merkkijono. Määrittää kuvan leveyden `type="image"`-kentälle.
 
 #### Rajoitukset {/*caveats*/}
 
-- Checkboxes need `checked` (or `defaultChecked`), not `value` (or `defaultValue`).
-- If a text input receives a string `value` prop, it will be [treated as controlled.](#controlling-an-input-with-a-state-variable)
-- If a checkbox or a radio button receives a boolean `checked` prop, it will be [treated as controlled.](#controlling-an-input-with-a-state-variable)
-- An input can't be both controlled and uncontrolled at the same time.
-- An input cannot switch between being controlled or uncontrolled over its lifetime.
-- Every controlled input needs an `onChange` event handler that synchronously updates its backing value.
+- Valintaruudut tarvitsevat `checked` (tai `defaultChecked`), ei `value` (tai `defaultValue`).
+- Jos tekstisyöttökenttä saa merkkijono `value`-propin, se [käsitellään kontrolloituna.](#controlling-an-input-with-a-state-variable)
+- Jos valintaruutu tai radiopainike saa boolean `checked`-propin, se [käsitellään kontrolloituna.](#controlling-an-input-with-a-state-variable)
+- Syöttökenttä ei voi olla sekä kontrolloitu että kontrolloimaton samaan aikaan.
+- Syöttökenttä ei voi vaihtaa kontrolloidusta kontrolloimattomaksi elinkaarensa aikana.
+- Jokainen kontrolloitu syöttökenttä tarvitsee `onChange`-käsittelijäfunktion, joka päivittää sen arvon synkronisesti.
 
 ---
 
 ## Käyttö {/*usage*/}
 
-### Displaying inputs of different types {/*displaying-inputs-of-different-types*/}
+### Eri tyyppisten syöttökenttien näyttäminen {/*displaying-inputs-of-different-types*/}
 
-To display an input, render an `<input>` component. By default, it will be a text input. You can pass `type="checkbox"` for a checkbox, `type="radio"` for a radio button, [or one of the other input types.](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types)
+Näyttääksesi syöttökentän, renderöi `<input>`-komponentti. Oletuksena, se on tekstisyöttökenttä. Voit antaa `type="checkbox"` valintaruudulle, `type="radio"` radiopainikkeelle, [tai yhden muista syöttökenttien tyypeistä.](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types)
 
 <Sandpack>
 
@@ -110,26 +109,26 @@ export default function MyForm() {
   return (
     <>
       <label>
-        Text input: <input name="myInput" />
+        Tekstisyöte: <input name="myInput" />
       </label>
       <hr />
       <label>
-        Checkbox: <input type="checkbox" name="myCheckbox" />
+        Valintaruutu: <input type="checkbox" name="myCheckbox" />
       </label>
       <hr />
       <p>
-        Radio buttons:
+        Monivalinta:
         <label>
           <input type="radio" name="myRadio" value="option1" />
-          Option 1
+          Valinta 1
         </label>
         <label>
           <input type="radio" name="myRadio" value="option2" />
-          Option 2
+          Valinta 2
         </label>
         <label>
           <input type="radio" name="myRadio" value="option3" />
-          Option 3
+          Valinta 3
         </label>
       </p>
     </>
@@ -146,11 +145,11 @@ input { margin: 5px; }
 
 ---
 
-### Providing a label for an input {/*providing-a-label-for-an-input*/}
+### Syöttökentän otsikko {/*providing-a-label-for-an-input*/}
 
-Typically, you will place every `<input>` inside a [`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label) tag. This tells the browser that this label is associated with that input. When the user clicks the label, the browser will automatically focus the input. It's also essential for accessibility: a screen reader will announce the label caption when the user focuses the associated input.
+Tyypillisesti, laitat jokaisen `<input>`-komponentin sisälle [`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)-tagin. Tämä kertoo selaimelle, että tämä otsikko on yhdistetty tähän syöttökenttään. Kun käyttäjä klikkaa otsikkoa, selain kohdistaa automaattisesti syöttökenttään. Tämä on myös olennaista saavutettavuuden kannalta: ruudunlukija ilmoittaa otsikon käyttäjälle, kun tämä kohdistaa siihen liittyvään syöttökenttään.
 
-If you can't nest `<input>` into a `<label>`, associate them by passing the same ID to `<input id>` and [`<label htmlFor>`.](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor) To avoid conflicts between multiple instances of one component, generate such an ID with [`useId`.](/reference/react/useId)
+Jos et voi sisällyttää `<input>`-komponenttia `<label>`-komponenttiin, yhdistä ne antamalla sama ID `<input id>`-komponentille ja [`<label htmlFor>`-komponentille.](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor) Välttääksesi konflikteja useiden yhden komponentin instanssien välillä, generoi tällainen ID [`useId`-komponentilla.](/reference/react/useId)
 
 <Sandpack>
 
@@ -162,11 +161,11 @@ export default function Form() {
   return (
     <>
       <label>
-        Your first name:
+        Etunimi:
         <input name="firstName" />
       </label>
       <hr />
-      <label htmlFor={ageInputId}>Your age:</label>
+      <label htmlFor={ageInputId}>Ikä:</label>
       <input id={ageInputId} name="age" type="number" />
     </>
   );
@@ -181,9 +180,9 @@ input { margin: 5px; }
 
 ---
 
-### Providing an initial value for an input {/*providing-an-initial-value-for-an-input*/}
+### Oletusarvon tarjoaminen syöttökentälle {/*providing-an-initial-value-for-an-input*/}
 
-You can optionally specify the initial value for any input. Pass it as the `defaultValue` string for text inputs. Checkboxes and radio buttons should specify the initial value with the `defaultChecked` boolean instead.
+Voit vaihtoehtoisesti määrittää alkuarvon mille tahansa syöttökentälle. Anna se `defaultValue`-merkkijonona tekstisyöttökentille. Valintaruudut ja radiopainikkeet määrittävät alkuarvon `defaultChecked`-totuusarvona.
 
 <Sandpack>
 
@@ -233,25 +232,25 @@ input { margin: 5px; }
 
 ---
 
-### Reading the input values when submitting a form {/*reading-the-input-values-when-submitting-a-form*/}
+### Syöttökentän arvon lukeminen lomakkeen lähetyksessä {/*reading-the-input-values-when-submitting-a-form*/}
 
-Add a [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) around your inputs with a [`<button type="submit">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) inside. It will call your `<form onSubmit>` event handler. By default, the browser will send the form data to the current URL and refresh the page. You can override that behavior by calling `e.preventDefault()`. Read the form data with [`new FormData(e.target)`](https://developer.mozilla.org/en-US/docs/Web/API/FormData).
+Lisää [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) syöttökenttien ympärille. Lisää myös `<button type="submit">`-komponentti sen sisään. Se kutsuu `<form onSubmit>`-käsittelijäfunktiota. Oletuksena, selain lähettää lomakedatan nykyiselle URL:lle ja päivittää sivun. Voit ohittaa tämän käyttämällä `e.preventDefault()`. Lue lomakedata [`new FormData(e.target)`:lla.](https://developer.mozilla.org/en-US/docs/Web/API/FormData)
 <Sandpack>
 
 ```js
 export default function MyForm() {
   function handleSubmit(e) {
-    // Prevent the browser from reloading the page
+    // Estä selainta lataamasta sivua uudelleen
     e.preventDefault();
 
-    // Read the form data
+    // Lue lomakedata
     const form = e.target;
     const formData = new FormData(form);
 
-    // You can pass formData as a fetch body directly:
+    // Voit välittää formData:n suoraan fetchin bodylle:
     fetch('/some-api', { method: form.method, body: formData });
 
-    // Or you can work with it as a plain object:
+    // Tai voit käsitellä sitä tavallisena objektina:
     const formJson = Object.fromEntries(formData.entries());
     console.log(formJson);
   }
@@ -259,22 +258,22 @@ export default function MyForm() {
   return (
     <form method="post" onSubmit={handleSubmit}>
       <label>
-        Text input: <input name="myInput" defaultValue="Some initial value" />
+        Tekstisyöte: <input name="myInput" defaultValue="Some initial value" />
       </label>
       <hr />
       <label>
-        Checkbox: <input type="checkbox" name="myCheckbox" defaultChecked={true} />
+        Valintaruutu: <input type="checkbox" name="myCheckbox" defaultChecked={true} />
       </label>
       <hr />
       <p>
-        Radio buttons:
-        <label><input type="radio" name="myRadio" value="option1" /> Option 1</label>
-        <label><input type="radio" name="myRadio" value="option2" defaultChecked={true} /> Option 2</label>
-        <label><input type="radio" name="myRadio" value="option3" /> Option 3</label>
+        Monivalinta:
+        <label><input type="radio" name="myRadio" value="option1" /> Vaihtoehto 1</label>
+        <label><input type="radio" name="myRadio" value="option2" defaultChecked={true} /> Vaihtoehto 2</label>
+        <label><input type="radio" name="myRadio" value="option3" /> Vaihtoehto 3</label>
       </p>
       <hr />
-      <button type="reset">Reset form</button>
-      <button type="submit">Submit form</button>
+      <button type="reset">Nollaa lomake</button>
+      <button type="submit">Lähetä lomake</button>
     </form>
   );
 }
@@ -289,38 +288,38 @@ input { margin: 5px; }
 
 <Note>
 
-Give a `name` to every `<input>`, for example `<input name="firstName" defaultValue="Taylor" />`. The `name` you specified will be used as a key in the form data, for example `{ firstName: "Taylor" }`.
+Anna jokaiselle `<input>`:lle `name`, esimerkiksi `<input name="firstName" defaultValue="Taylor" />`. `name`-arvoa käytetään avaimena lomakedatassa, esimerkiksi `{ firstName: "Taylor" }`.
 
 </Note>
 
 <Pitfall>
 
-By default, *any* `<button>` inside a `<form>` will submit it. This can be surprising! If you have your own custom `Button` React component, consider returning [`<button type="button">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/button) instead of `<button>`. Then, to be explicit, use `<button type="submit">` for buttons that *are* supposed to submit the form.
+Oletuksena *mikä tahansa* `<button>` `<form>`:n sisällä lähettää sen. Tämä voi olla yllättävää! Jos sinulla on oma `Button` React-komponentti, harkitse `<button type="button">`-komponentin palauttamista sen sijaan. Sitten, ollaksesi eksplisiittinen, käytä `<button type="submit">`-komponenttia napeille joiden *on* tarkoitus lähettää lomake.
 
 </Pitfall>
 
 ---
 
-### Controlling an input with a state variable {/*controlling-an-input-with-a-state-variable*/}
+### Syöttökentän ohjaaminen tilamuuttujalla {/*controlling-an-input-with-a-state-variable*/}
 
-An input like `<input />` is *uncontrolled.* Even if you [pass an initial value](#providing-an-initial-value-for-an-input) like `<input defaultValue="Initial text" />`, your JSX only specifies the initial value. It does not control what the value should be right now.
+Syöttökenttä kuten `<input />` on *kontrolloimaton.* Vaikka [antaisit alkuarvon](#providing-an-initial-value-for-an-input) kuten `<input defaultValue="Alkuteksti" />`, JSX:si määrittää vain alkuarvon. Se ei kontrolloi mitä arvoa sen pitäisi olla juuri nyt.
 
-**To render a _controlled_ input, pass the `value` prop to it (or `checked` for checkboxes and radios).** React will force the input to always have the `value` you passed. Usually, you would do this by declaring a [state variable:](/reference/react/useState)
+**Renderöidäksesi _kontrolloidun_ syöttökentän, anna sille `value`-prop.** React pakottaa syöttökentän aina olemaan `value` jonka annoit. Yleensä, teet tämän määrittämällä [tilamuuttujan:](/reference/react/useState)
 
 ```js {2,6,7}
 function Form() {
-  const [firstName, setFirstName] = useState(''); // Declare a state variable...
+  const [firstName, setFirstName] = useState(''); // Määritä tilamuuttuja...
   // ...
   return (
     <input
-      value={firstName} // ...force the input's value to match the state variable...
-      onChange={e => setFirstName(e.target.value)} // ... and update the state variable on any edits!
+      value={firstName} // ...pakota kentän arvo vastaamaan tilamuuttujaa...
+      onChange={e => setFirstName(e.target.value)} // ... ja päivitä tilamuuttuja jokaisella muutoksella!
     />
   );
 }
 ```
 
-A controlled input makes sense if you needed state anyway--for example, to re-render your UI on every edit:
+Kontrolloitu syöttökenttä on järkevä jos tarvitset tilamuuttujaa muutenkin--esimerkiksi, renderöidäksesi uudelleen käyttöliittymäsi jokaisella muutoksella:
 
 ```js {2,9}
 function Form() {
@@ -328,14 +327,14 @@ function Form() {
   return (
     <>
       <label>
-        First name:
+        Etunimi:
         <input value={firstName} onChange={e => setFirstName(e.target.value)} />
       </label>
-      {firstName !== '' && <p>Your name is {firstName}.</p>}
+      {firstName !== '' && <p>Nimesi on {firstName}.</p>}
       ...
 ```
 
-It's also useful if you want to offer multiple ways to adjust the input state (for example, by clicking a button):
+On myös hyödyllistä jos haluat tarjota useita tapoja muuttaa syöttökentän tilaa (esimerkiksi, klikkaamalla nappia):
 
 ```js {3-4,10-11,14}
 function Form() {
@@ -345,18 +344,18 @@ function Form() {
   return (
     <>
       <label>
-        Age:
+        Ikä:
         <input
           value={age}
           onChange={e => setAge(e.target.value)}
           type="number"
         />
         <button onClick={() => setAge(ageAsNumber + 10)}>
-          Add 10 years
+          Lisää 10 vuotta
         </button>
 ```
 
-The `value` you pass to controlled components should not be `undefined` or `null`. If you need the initial value to be empty (such as with the `firstName` field below), initialize your state variable to an empty string (`''`).
+`value` jonka välität kontrolloiduille komponenteille ei saa olla `undefined` tai `null`. Jos tarvitset tyhjän alkuarvon (esimerkiksi, `firstName`-kentän alla), alusta tilamuuttujasi tyhjällä merkkijonolla (`''`).
 
 <Sandpack>
 
@@ -370,28 +369,28 @@ export default function Form() {
   return (
     <>
       <label>
-        First name:
+        Etunimi:
         <input
           value={firstName}
           onChange={e => setFirstName(e.target.value)}
         />
       </label>
       <label>
-        Age:
+        Ikä:
         <input
           value={age}
           onChange={e => setAge(e.target.value)}
           type="number"
         />
         <button onClick={() => setAge(ageAsNumber + 10)}>
-          Add 10 years
+          Lisää 10 vuotta
         </button>
       </label>
       {firstName !== '' &&
-        <p>Your name is {firstName}.</p>
+        <p>Nimesi on {firstName}.</p>
       }
       {ageAsNumber > 0 &&
-        <p>Your age is {ageAsNumber}.</p>
+        <p>Ikäsi on {ageAsNumber}.</p>
       }
     </>
   );
@@ -408,17 +407,17 @@ p { font-weight: bold; }
 
 <Pitfall>
 
-**If you pass `value` without `onChange`, it will be impossible to type into the input.** When you control an input by passing some `value` to it, you *force* it to always have the value you passed. So if you pass a state variable as a `value` but forget to update that state variable synchronously during the `onChange` event handler, React will revert the input after every keystroke back to the `value` that you specified.
+**Jos välität `value`-arvon ilman `onChange`:a, syöttökenttään ei voi kirjoittaa.** Kun kontrolloit syöttökenttää välittämällä sille `value`-arvon, *pakotat* sen aina olemaan arvon jonka välitit. Joten jos välität tilamuuttujan `value`:n mutta unohdat päivittää tilamuuttujaa synkronisesti `onChange`-tapahtumakäsittelijässä, React palauttaa syöttökentän jokaisen näppäinpainalluksen jälkeen takaisin `value`:n arvoon jonka määritit.
 
 </Pitfall>
 
 ---
 
-### Optimizing re-rendering on every keystroke {/*optimizing-re-rendering-on-every-keystroke*/}
+### Renderöinnin optimoiminen joka näppäinpainalluksella {/*optimizing-re-rendering-on-every-keystroke*/}
 
-When you use a controlled input, you set the state on every keystroke. If the component containing your state re-renders a large tree, this can get slow. There's a few ways you can optimize re-rendering performance.
+Kun käytät kontrolloitua syöttökenttää, asetat tilamuuttujan jokaisella näppäinpainalluksella. Jos komponentti joka sisältää tilamuuttujan uudelleen renderöi suuren puun, tästä saattaa tulla hidasta. On muutamia tapoja joilla voit optimoida uudelleen renderöimisen suorityskykyä.
 
-For example, suppose you start with a form that re-renders all page content on every keystroke:
+Esimerkiksi, oletetaan että aloitat lomakkeella joka uudelleen renderöi kaiken sisällön jokaisella näppäinpainalluksella:
 
 ```js {5-8}
 function App() {
@@ -434,7 +433,7 @@ function App() {
 }
 ```
 
-Since `<PageContent />` doesn't rely on the input state, you can move the input state into its own component:
+Sillä `<PageContent />` ei nojaa syöttökentän tilaan, voit siirtää syöttökentän tilan omaan komponenttiinsa:
 
 ```js {4,10-17}
 function App() {
@@ -456,20 +455,20 @@ function SignupForm() {
 }
 ```
 
-This significantly improves performance because now only `SignupForm` re-renders on every keystroke.
+Tämä parantaa suorituskykyä merkittävästi koska nyt vain `SignupForm` uudelleen renderöi jokaisella näppäinpainalluksella.
 
-If there is no way to avoid re-rendering (for example, if `PageContent` depends on the search input's value), [`useDeferredValue`](/reference/react/useDeferredValue#deferring-re-rendering-for-a-part-of-the-ui) lets you keep the controlled input responsive even in the middle of a large re-render.
+Jos ei ole tapaa välttää uudelleen renderöintiä (esimerkiksi, jos `PageContent` riippuu hakukentän arvosta), [`useDeferredValue`](/reference/react/useDeferredValue#deferring-re-rendering-for-a-part-of-the-ui) antaa sinun pitää kontrolloidun syöttökentän reagoivana jopa suuren uudelleen renderöinnin keskellä.
 
 ---
 
 ## Vianmääritys {/*troubleshooting*/}
 
-### My text input doesn't update when I type into it {/*my-text-input-doesnt-update-when-i-type-into-it*/}
+### Tekstikenttäni ei päivity kun kirjoitan siihen {/*my-text-input-doesnt-update-when-i-type-into-it*/}
 
-If you render an input with `value` but no `onChange`, you will see an error in the console:
+Jos renderöit syöttökentän `value`-arvolla mutta ilman `onChange`:a, näet virheen konsolissa:
 
 ```js
-// 🔴 Bug: controlled text input with no onChange handler
+// 🔴 Bugi: kontrolloitu tekstisyöttökenttä ilman onChange-käsittelijää
 <input value={something} />
 ```
 
@@ -479,35 +478,35 @@ You provided a `value` prop to a form field without an `onChange` handler. This
 
 </ConsoleBlock>
 
-As the error message suggests, if you only wanted to [specify the *initial* value,](#providing-an-initial-value-for-an-input) pass `defaultValue` instead:
+Kuten virheviesti ehdottaa, jos halusit vain [määrittää *alkuarvon*,](#providing-an-initial-value-for-an-input) välitä `defaultValue` sen sijaan:
 
 ```js
-// ✅ Good: uncontrolled input with an initial value
+// ✅ Hyvä: kontrolloimaton syöttökenttä alkuarvolla
 <input defaultValue={something} />
 ```
 
-If you want [to control this input with a state variable,](#controlling-an-input-with-a-state-variable) specify an `onChange` handler:
+Jos haluat [kontrolloida tätä syöttökenttää tilamuuttujalla,](#controlling-an-input-with-a-state-variable) määritä `onChange`-käsittelijä:
 
 ```js
-// ✅ Good: controlled input with onChange
+// ✅ Hyvä: kontrolloitu syöttökenttä onChange-käsittelijällä
 <input value={something} onChange={e => setSomething(e.target.value)} />
 ```
 
-If the value is intentionally read-only, add a `readOnly` prop to suppress the error:
+Jos arvo on tarkoituksella vain luettava, lisää `readOnly`-prop.
 
 ```js
-// ✅ Good: readonly controlled input without on change
+// ✅ Hyvä: vain luku -syöttökenttä ilman onChange-käsittelijää
 <input value={something} readOnly={true} />
 ```
 
 ---
 
-### My checkbox doesn't update when I click on it {/*my-checkbox-doesnt-update-when-i-click-on-it*/}
+### Valintaruutuni ei päivity kun painan siitä {/*my-checkbox-doesnt-update-when-i-click-on-it*/}
 
-If you render a checkbox with `checked` but no `onChange`, you will see an error in the console:
+Jos renderöit valintaruudun `checked`-arvolla mutta ilman `onChange`:a, näet virheen konsolissa:
 
 ```js
-// 🔴 Bug: controlled checkbox with no onChange handler
+// 🔴 Bugi: kontrolloitu valintaruutu ilman onChange-käsittelijää
 <input type="checkbox" checked={something} />
 ```
 
@@ -517,79 +516,79 @@ You provided a `checked` prop to a form field without an `onChange` handler. Thi
 
 </ConsoleBlock>
 
-As the error message suggests, if you only wanted to [specify the *initial* value,](#providing-an-initial-value-for-an-input) pass `defaultChecked` instead:
+Kuten virheviesti ehdottaa, jos halusit vain [määrittää *alkuarvon*,](#providing-an-initial-value-for-an-input) välitä `defaultChecked` sen sijaan:
 
 ```js
-// ✅ Good: uncontrolled checkbox with an initial value
+// ✅ Hyvä: kontrolloimaton valintaruutu alkuarvolla
 <input type="checkbox" defaultChecked={something} />
 ```
 
-If you want [to control this checkbox with a state variable,](#controlling-an-input-with-a-state-variable) specify an `onChange` handler:
+Jos haluat [kontrolloida tätä valintaruutua tilamuuttujalla,](#controlling-an-input-with-a-state-variable) määritä `onChange`-käsittelijä:
 
 ```js
-// ✅ Good: controlled checkbox with onChange
+// ✅ Hyvä: kontrolloitu valintaruutu onChange-käsittelijällä
 <input type="checkbox" checked={something} onChange={e => setSomething(e.target.checked)} />
 ```
 
 <Pitfall>
 
-You need to read `e.target.checked` rather than `e.target.value` for checkboxes.
+Sinun tulee lukea `e.target.checked` eikä `e.target.value` valintaruuduille.
 
 </Pitfall>
 
-If the checkbox is intentionally read-only, add a `readOnly` prop to suppress the error:
+Jos valintaruutu on tarkoituksella vain luettava, lisää `readOnly`-prop virheen poistamiseksi:
 
 ```js
-// ✅ Good: readonly controlled input without on change
+// ✅ Hyvä: vain luku -valintaruutu ilman onChange-käsittelijää
 <input type="checkbox" checked={something} readOnly={true} />
 ```
 
 ---
 
-### My input caret jumps to the beginning on every keystroke {/*my-input-caret-jumps-to-the-beginning-on-every-keystroke*/}
+### Syötön kursori hyppää alkuun jokaisen näppäinpainalluksen yhteydessä {/*my-input-caret-jumps-to-the-beginning-on-every-keystroke*/}
 
-If you [control an input,](#controlling-an-input-with-a-state-variable) you must update its state variable to the input's value from the DOM during `onChange`.
+Jos [kontrolloit syöttökenttää,](#controlling-an-input-with-a-state-variable) sinun täytyy päivittää sen tilamuuttuja syöttökentän arvoksi DOM:sta `onChange`:n aikana.
 
-You can't update it to something other than `e.target.value` (or `e.target.checked` for checkboxes):
+Et voi päivittää sitä joksikin muuksi kuin `e.target.value` (tai `e.target.checked` valintaruuduille):
 
 ```js
 function handleChange(e) {
-  // 🔴 Bug: updating an input to something other than e.target.value
+  // 🔴 Bugi: kentän päivittäminen joksikin muuksi kuin e.target.value
   setFirstName(e.target.value.toUpperCase());
 }
 ```
 
-You also can't update it asynchronously:
+Et voi myöskään päivittää sitä asynkronisesti:
 
 ```js
 function handleChange(e) {
-  // 🔴 Bug: updating an input asynchronously
+  // 🔴 Bugi: kentän päivittäminen asynkronisesti
   setTimeout(() => {
     setFirstName(e.target.value);
   }, 100);
 }
 ```
 
-To fix your code, update it synchronously to `e.target.value`:
+Korjataksesi koodisi, päivitä se synkronisesti `e.target.value`:lla:
 
 ```js
 function handleChange(e) {
-  // ✅ Updating a controlled input to e.target.value synchronously
+  // ✅ Kontrolloidun kentän päivittäminen e.target.value:lla synkronisesti
   setFirstName(e.target.value);
 }
 ```
 
-If this doesn't fix the problem, it's possible that the input gets removed and re-added from the DOM on every keystroke. This can happen if you're accidentally [resetting state](/learn/preserving-and-resetting-state) on every re-render, for example if the input or one of its parents always receives a different `key` attribute, or if you nest component function definitions (which is not supported and causes the "inner" component to always be considered a different tree).
+Jos tämä ei korjaa ongelmaa, on mahdollista että syöttökenttä poistetaan ja lisätään takaisin DOM:iin jokaisella näppäinpainalluksella. Tämä voi tapahtua jos olet vahingossa [nollannut tilan](/learn/preserving-and-resetting-state) jokaisella uudelleen renderöinnillä, esimerkiksi jos syöttökenttä tai jokin sen vanhemmista saa aina erilaisen `key`-attribuutin, tai jos upotat komponenttifunktioiden määrittelyjä (jota ei tueta ja aiheuttaa "sisemmän" komponentin aina olevan eri puu).
 
 ---
 
-### I'm getting an error: "A component is changing an uncontrolled input to be controlled" {/*im-getting-an-error-a-component-is-changing-an-uncontrolled-input-to-be-controlled*/}
+### Saan virheen: "A component is changing an uncontrolled input to be controlled" {/*im-getting-an-error-a-component-is-changing-an-uncontrolled-input-to-be-controlled*/}
 
 
-If you provide a `value` to the component, it must remain a string throughout its lifetime.
+Jos tarjoat `value`:n komponentille, sen täytyy pysyä merkkijonona koko elinkaarensa ajan.
 
-You cannot pass `value={undefined}` first and later pass `value="some string"` because React won't know whether you want the component to be uncontrolled or controlled. A controlled component should always receive a string `value`, not `null` or `undefined`.
+Et voi välittää `value={undefined}` ensin ja myöhemmin välittää `value="some string"` koska React ei tiedä haluatko komponentin olevan kontrolloimaton vai kontrolloitu. Kontrolloidun komponentin tulisi aina saada merkkijonona `value`, ei `null` tai `undefined`.
 
-If your `value` is coming from an API or a state variable, it might be initialized to `null` or `undefined`. In that case, either set it to an empty string (`''`) initially, or pass `value={someValue ?? ''}` to ensure `value` is a string.
+Jos `value` tulee API:sta tai tilamuuttujasta, se voi olla alustettu `null` tai `undefined`. Tässä tapauksessa, joko aseta se tyhjäksi merkkijonoksi (`''`) aluksi, tai välitä `value={someValue ?? ''}` varmistaaksesi, että `value` on merkkijono.
 
-Similarly, if you pass `checked` to a checkbox, ensure it's always a boolean.
+Vastaavasti, jos välität `checked` propsin valintaruudulle, varmista että se on aina totuusarvo.
diff --git a/src/content/reference/react-dom/components/option.md b/src/content/reference/react-dom/components/option.md
index 8b228d205..1d3958f47 100644
--- a/src/content/reference/react-dom/components/option.md
+++ b/src/content/reference/react-dom/components/option.md
@@ -4,12 +4,12 @@ title: "<option>"
 
 <Intro>
 
-The [built-in browser `<option>` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option) lets you render an option inside a [`<select>`](/reference/react-dom/components/select) box.
+[Selaimen sisäänrakennettu `<option>`-komponentti](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option) mahdollistaa vaihtoehdon renderöimisen [`<select>`](/reference/react-dom/components/select)-listaan.
 
 ```js
 <select>
-  <option value="someOption">Some option</option>
-  <option value="otherOption">Other option</option>
+  <option value="someOption">Jokin vaihtoehto</option>
+  <option value="otherOption">Toinen vaihtoehto</option>
 </select>
 ```
 
@@ -23,40 +23,40 @@ The [built-in browser `<option>` component](https://developer.mozilla.org/en-US/
 
 ### `<option>` {/*option*/}
 
-The [built-in browser `<option>` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option) lets you render an option inside a [`<select>`](/reference/react-dom/components/select) box.
+[Selaimen sisäänrakennettu `<option>`-komponentti](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option) mahdollistaa vaihtoehdon renderöimisen [`<select>`](/reference/react-dom/components/select)-listaan.
 
 ```js
 <select>
-  <option value="someOption">Some option</option>
-  <option value="otherOption">Other option</option>
+  <option value="someOption">Jokin vaihtoehto</option>
+  <option value="otherOption">Toinen vaihtoehto</option>
 </select>
 ```
 
-[See more examples below.](#usage)
+[Näe lisää esimerkkejä alla.](#usage)
 
 #### Propsit {/*props*/}
 
-`<option>` supports all [common element props.](/reference/react-dom/components/common#props)
+`<option>` tukee kaikkia [yleisten elementtien propseja.](/reference/react-dom/components/common#props)
 
-Additionally, `<option>` supports these props:
+Lisäksi, `<option>` tukee näitä propseja:
 
-* [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option#disabled): A boolean. If `true`, the option will not be selectable and will appear dimmed.
-* [`label`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option#label): A string. Specifies the meaning of the option. If not specified, the text inside the option is used.
-* [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option#value): The value to be used [when submitting the parent `<select>` in a form](/reference/react-dom/components/select#reading-the-select-box-value-when-submitting-a-form) if this option is selected.
+* [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option#disabled): Totuusarvo. Jos `true`, valinta ei ole valittavissa ja näkyy himmennettynä.
+* [`label`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option#label): Merkkijono. Määrittelee valinnan tarkoituksen. Jos ei määritelty, käytetään tekstiä valinnan sisällä.
+* [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option#value): Arvo, jota käytetään [kun ylätason `<select>` lähetetään lomakkeessa](/reference/react-dom/components/select#reading-the-select-box-value-when-submitting-a-form) jos tämä vaihtoehto on valittuna.
 
 #### Rajoitukset {/*caveats*/}
 
-* React does not support the `selected` attribute on `<option>`. Instead, pass this option's `value` to the parent [`<select defaultValue>`](/reference/react-dom/components/select#providing-an-initially-selected-option) for an uncontrolled select box, or [`<select value>`](/reference/react-dom/components/select#controlling-a-select-box-with-a-state-variable) for a controlled select.
+* React ei tue `<option>`-komponentin `selected`-attribuuttia. Sen sijaan, anna tämän vaihtoehdon `value`-arvo ylätason [`<select defaultValue>`](/reference/react-dom/components/select#providing-an-initially-selected-option)-komponentille, jos haluat luoda kontrolloimattoman valintalistan, tai [`<select value>`](/reference/react-dom/components/select#controlling-a-select-box-with-a-state-variable)-komponentille, jos haluat luoda kontrolloidun valintalista.
 
 ---
 
 ## Käyttö {/*usage*/}
 
-### Displaying a select box with options {/*displaying-a-select-box-with-options*/}
+### Valintalistan näyttäminen vaihtoehdoilla {/*displaying-a-select-box-with-options*/}
 
-Render a `<select>` with a list of `<option>` components inside to display a select box. Give each `<option>` a `value` representing the data to be submitted with the form.
+Renderöi `<select>`-komponentti, jossa on sisällä lista `<option>`-komponentteja näyttääksesi valintalistan. Anna jokaiselle `<option>`-komponentille `value`-arvo, joka edustaa dataa, joka lähetetään lomakkeen mukana.
 
-[Read more about displaying a `<select>` with a list of `<option>` components.](/reference/react-dom/components/select)
+[Lue lisää valintalistan näyttämisestä `<select>`-komponentilla, jossa on lista `<option>`-komponentteja.](/reference/react-dom/components/select)
 
 <Sandpack>
 
@@ -64,11 +64,11 @@ Render a `<select>` with a list of `<option>` components inside to display a sel
 export default function FruitPicker() {
   return (
     <label>
-      Pick a fruit:
+      Valitse hedelmä:
       <select name="selectedFruit">
-        <option value="apple">Apple</option>
-        <option value="banana">Banana</option>
-        <option value="orange">Orange</option>
+        <option value="apple">Omena</option>
+        <option value="banana">Banaani</option>
+        <option value="orange">Appelsiini</option>
       </select>
     </label>
   );
diff --git a/src/content/reference/react-dom/components/progress.md b/src/content/reference/react-dom/components/progress.md
index 3e629026e..30c256fbf 100644
--- a/src/content/reference/react-dom/components/progress.md
+++ b/src/content/reference/react-dom/components/progress.md
@@ -4,7 +4,7 @@ title: "<progress>"
 
 <Intro>
 
-The [built-in browser `<progress>` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress) lets you render a progress indicator.
+[Selaimen sisäänrakennettu `<progress>`-komponentti](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress) mahdollistaa edistymisindikaattorin renderöinnin.
 
 ```js
 <progress value={0.5} />
@@ -20,32 +20,32 @@ The [built-in browser `<progress>` component](https://developer.mozilla.org/en-U
 
 ### `<progress>` {/*progress*/}
 
-To display a progress indicator, render the [built-in browser `<progress>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress) component.
+Näyttääksesi edistymisindikaattorin, renderöi [selaimen sisäänrakennettu `<progress>`-komponentti](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress).
 
 ```js
 <progress value={0.5} />
 ```
 
-[See more examples below.](#usage)
+[Näe lisää esimerkkejä alla.](#usage)
 
 #### Propsit {/*props*/}
 
-`<progress>` supports all [common element props.](/reference/react-dom/components/common#props)
+`<progress>` tukee kaikkia [yleisien elementin propseja.](/reference/react-dom/components/common#props)
 
-Additionally, `<progress>` supports these props:
+Lisäksi, `<progress>` tukee näitä propseja:
 
-* [`max`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#max): A number. Specifies the maximum `value`. Defaults to `1`.
-* [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#value): A number between `0` and `max`, or `null` for indeterminate progress. Specifies how much was done.
+* [`max`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#max): Numero. Määrittelee `value`:n enimmäismäärän. Oletuksena `1`.
+* [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#value): Numero `0` ja `max`:n väliltä, tai `null` for määrittämättömään edistymiseen. Määrittelee miten paljon on tehty.
 
 ---
 
 ## Käyttö {/*usage*/}
 
-### Controlling a progress indicator {/*controlling-a-progress-indicator*/}
+### Edistymisindikaattorin ohjaaminen {/*controlling-a-progress-indicator*/}
 
-To display a progress indicator, render a `<progress>` component. You can pass a number `value` between `0` and the `max` value you specify. If you don't pass a `max` value, it will assumed to be `1` by default.
+Näyttääksesi edistymisindikaattorin, renderöi `<progress>`-komponentti. Voit antaa numeron `value` väliltä `0` ja `max`-arvon, jonka määrität. Jos et anna `max`-arvoa, oletetaan sen olevan `1` oletuksena.
 
-If the operation is not ongoing, pass `value={null}` to put the progress indicator into an indeterminate state.
+Jos operaatio ei ole käynnissä, anna `value={null}` asettaaksesi edistymisindikaattorin määrittelemättömään tilaan.
 
 <Sandpack>
 
diff --git a/src/content/reference/react-dom/components/select.md b/src/content/reference/react-dom/components/select.md
index 2b5572c9f..5138f1b9b 100644
--- a/src/content/reference/react-dom/components/select.md
+++ b/src/content/reference/react-dom/components/select.md
@@ -4,12 +4,12 @@ title: "<select>"
 
 <Intro>
 
-The [built-in browser `<select>` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select) lets you render a select box with options.
+[Selaimen sisäänrakennettu `<select>`-komponentti](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select) mahdollistaa valintalistan renderöimisen vaihtoehtoineen.
 
 ```js
 <select>
-  <option value="someOption">Some option</option>
-  <option value="otherOption">Other option</option>
+  <option value="someOption">Jokin vaihtoehto</option>
+  <option value="otherOption">Toinen vaihtoehto</option>
 </select>
 ```
 
@@ -23,64 +23,64 @@ The [built-in browser `<select>` component](https://developer.mozilla.org/en-US/
 
 ### `<select>` {/*select*/}
 
-To display a select box, render the [built-in browser `<select>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select) component.
+Näyttääksesi valintalistan, renderöi [selaimen sisäänrakennettu `<select>`-komponentti](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select).
 
 ```js
 <select>
-  <option value="someOption">Some option</option>
-  <option value="otherOption">Other option</option>
+  <option value="someOption">Jokin vaihtoehto</option>
+  <option value="otherOption">Toinen vaihtoehto</option>
 </select>
 ```
 
-[See more examples below.](#usage)
+[Näe lisää esimerkkejä alla.](#usage)
 
 #### Propsit {/*props*/}
 
-`<select>` supports all [common element props.](/reference/react-dom/components/common#props)
+`<select>` tukee kaikkia [yleisten elementtien propseja.](/reference/react-dom/components/common#props)
 
-You can [make a select box controlled](#controlling-a-select-box-with-a-state-variable) by passing a `value` prop:
+Voit [tehdä valintalistan kontrolloiduksi](#controlling-a-select-box-with-a-state-variable) antamalla `value`-propsin:
 
-* `value`: A string (or an array of strings for [`multiple={true}`](#enabling-multiple-selection)). Controls which option is selected. Every value string match the `value` of some `<option>` nested inside the `<select>`.
+* `value`: Merkkijono (tai merkkijonojen taulukko [`multiple={true}`](#enabling-multiple-selection)). Ohjaa, mikä vaihtoehto on valittuna. Jokainen merkkijonon arvo vastaa jonkin `<option>`-komponentin `value`-arvoa, joka on upotettu `<select>`-komponenttiin.
 
-When you pass `value`, you must also pass an `onChange` handler that updates the passed value.
+Kun välität `value`:n, sinun täytyy myös välittää `onChange`-käsittelijäfunktio, joka päivittää välitetyn arvon.
 
-If your `<select>` is uncontrolled, you may pass the `defaultValue` prop instead:
+Jos `<select>` on kontrolloimaton, voit antaa `defaultValue`-propsin:
 
-* `defaultValue`: A string (or an array of strings for [`multiple={true}`](#enabling-multiple-selection)). Specifies [the initially selected option.](#providing-an-initially-selected-option)
+* `defaultValue`: Merkkijono (tai merkkijonojen taulukko [`multiple={true}`](#enabling-multiple-selection)). Määrittelee [aluksi valitun vaihtoehdon.](#providing-an-initially-selected-option)
 
-These `<select>` props are relevant both for uncontrolled and controlled select boxes:
+Nämä `<select>`-propsit ovat olennaisia sekä kontrolloimattomille että kontrolloiduille valintalistoille:
 
-* [`autoComplete`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#autocomplete): A string. Specifies one of the possible [autocomplete behaviors.](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values)
-* [`autoFocus`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#autofocus): A boolean. If `true`, React will focus the element on mount.
-* `children`: `<select>` accepts [`<option>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option), [`<optgroup>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup), and [`<datalist>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist) components as children. You can also pass your own components as long as they eventually render one of the allowed components. If you pass your own components that eventually render `<option>` tags, each `<option>` you render must have a `value`.
-* [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#disabled): A boolean. If `true`, the select box will not be interactive and will appear dimmed.
-* [`form`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#form): A string. Specifies the `id` of the `<form>` this select box belongs to. If omitted, it's the closest parent form.
-* [`multiple`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#multiple): A boolean. If `true`, the browser allows [multiple selection.](#enabling-multiple-selection)
-* [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#name): A string. Specifies the name for this select box that's [submitted with the form.](#reading-the-select-box-value-when-submitting-a-form)
-* `onChange`: An [`Event` handler](/reference/react-dom/components/common#event-handler) function. Required for [controlled select boxes.](#controlling-a-select-box-with-a-state-variable) Fires immediately when the user picks a different option. Behaves like the browser [`input` event.](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event)
-* `onChangeCapture`: A version of `onChange` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`onInput`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event): An [`Event` handler](/reference/react-dom/components/common#event-handler) function. Fires immediately when the value is changed by the user. For historical reasons, in React it is idiomatic to use `onChange` instead which works similarly.
-* `onInputCapture`: A version of `onInput` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`onInvalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event): An [`Event` handler](/reference/react-dom/components/common#event-handler) function. Fires if an input fails validation on form submit. Unlike the built-in `invalid` event, the React `onInvalid` event bubbles.
-* `onInvalidCapture`: A version of `onInvalid` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`required`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#required): A boolean. If `true`, the value must be provided for the form to submit.
-* [`size`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#size): A number. For `multiple={true}` selects, specifies the preferred number of initially visible items.
+* [`autoComplete`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#autocomplete): Merkkijono. Määrittää yhden mahdollisista [automaattisen täydennyksen käyttäytymistavoista.](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values)
+* [`autoFocus`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#autofocus): Totuusarvo. Jos `true`, React kohdistaa elementtiin mountatessa.
+* `children`: `<select>` hyväksyy [`<option>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option), [`<optgroup>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup), ja [`<datalist>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist) komponentit lapsina. Boit myös välittää omia komponentteja kunhan ne lopulta renderöivät jonkun sallituista komponenteista. Jos välität omia komponentteja, jotka lopulta renderöivät `<option>` tageja, jokaisen `<option>`:n täytyy omata `value`.
+* [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#disabled): Totuusarvo. Jos `true`, valintalista ei ole interaktiivinen ja näkyy himmennettynä.
+* [`form`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#form): Merkkijono. Määrittää `<form>` lomakkeen `id` :n johon tämä kenttä kuuluu. Jos jätetty pois, se on lähin ylätason lomake.
+* [`multiple`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#multiple): Totuusarvo. Jos `true`, selain mahdollistaa [monen vaihtoehdon valinnan.](#enabling-multiple-selection)
+* [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#name): Merkkijono. Määrittää nimen tälle kentälle, joka [lähetetään lomakkeessa.](#reading-the-select-box-value-when-submitting-a-form)
+* `onChange`: [`Event` käsittelijäfunktio](/reference/react-dom/components/common#event-handler). Vaaditaan [kontrolloituihin valintalistoihin.](#controlling-a-select-box-with-a-state-variable) Suoritetaan heti kun käyttäjä valitsee toisen vaihtoehdon. Käyttäytyy kuten selaimen [`input` tapahtuma.](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event)
+* `onChangeCapture`: Versio `onChange`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+* [`onInput`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event): [`Event` käsittelijäfunktio](/reference/react-dom/components/common#event-handler). Suoritetaan heti kun käyttäjä muuttaa kentän arvoa. Historiallisista syistä, Reactissa on idiomaattista käyttää tämän tilalla `onChange`, joka toimii samanlaisesti.
+* `onInputCapture`: Versio `onInput`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+* [`onInvalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event): [`Event` käsittelijäfunktio](/reference/react-dom/components/common#event-handler). Suoritetaan jos syöte ei läpäise validointia lomaketta lähetettäessä. Toisin kuin selaimen sisäänrakennettu `invalid`-tapahtuma, Reactin `onInvalid`-tapahtuma kuplii.
+* `onInvalidCapture`: Versio `onInvalid`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+* [`required`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#required): Totuusarvo. Jos `true`, arvon on oltava lomaketta lähettäessä.
+* [`size`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#size): Numero. `multiple={true}` valintalistoille, määrittelee halutun määrän aluksi näkyvillä olevia kohteita.
 
 #### Rajoitukset {/*caveats*/}
 
-- Unlike in HTML, passing a `selected` attribute to `<option>` is not supported. Instead, use [`<select defaultValue>`](#providing-an-initially-selected-option) for uncontrolled select boxes and [`<select value>`](#controlling-a-select-box-with-a-state-variable) for controlled select boxes.
-- If a select box receives a `value` prop, it will be [treated as controlled.](#controlling-a-select-box-with-a-state-variable)
-- A select box can't be both controlled and uncontrolled at the same time.
-- A select box cannot switch between being controlled or uncontrolled over its lifetime.
-- Every controlled select box needs an `onChange` event handler that synchronously updates its backing value.
+- Toisin kuin HTML:ssä, `<option>`-komponentin `selected`-attribuutti ei ole tuettu. Sen sijaan, käytä [`<select defaultValue>`](#providing-an-initially-selected-option) kontrolloimattomille valintalistoille ja [`<select value>`](#controlling-a-select-box-with-a-state-variable) kontrolloiduille valintalistoille.
+- Jos valintalista vastaanottaa `value`-propsin, se [käsitellään kontrolloituna.](#controlling-a-select-box-with-a-state-variable)
+- Valintalista ei voi olla sekä kontrolloitu että kontrolloimaton samaan aikaan.
+- Valintalista ei voi vaihtaa kontrolloidusta kontrolloimattomaan elinkaarensa aikana.
+- Jokainen kontrolloitu valintalista tarvitsee `onChange`-käsittelijäfunktion, joka päivittää arvon synkronisesti.
 
 ---
 
 ## Käyttö {/*usage*/}
 
-### Displaying a select box with options {/*displaying-a-select-box-with-options*/}
+### Valintalistan näyttäminen vaihtoehdoilla {/*displaying-a-select-box-with-options*/}
 
-Render a `<select>` with a list of `<option>` components inside to display a select box. Give each `<option>` a `value` representing the data to be submitted with the form.
+Renderöi `<select>`-komponentti, jossa on sisällä lista `<option>`-komponentteja näyttääksesi valintalistan. Anna jokaiselle `<option>`-komponentille `value`, joka edustaa dataa, joka lähetetään lomakkeen mukana.
 
 <Sandpack>
 
@@ -88,10 +88,10 @@ Render a `<select>` with a list of `<option>` components inside to display a sel
 export default function FruitPicker() {
   return (
     <label>
-      Pick a fruit:
+      Valitse hedelmä:
       <select name="selectedFruit">
-        <option value="apple">Apple</option>
-        <option value="banana">Banana</option>
+        <option value="apple">Omena</option>
+        <option value="banana">Banaani</option>
         <option value="orange">Orange</option>
       </select>
     </label>
@@ -107,12 +107,14 @@ select { margin: 5px; }
 
 ---
 
-### Providing a label for a select box {/*providing-a-label-for-a-select-box*/}
+### Otsikon tarjoaminen valintalistalle {/*providing-a-label-for-a-select-box*/}
 
-Typically, you will place every `<select>` inside a [`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label) tag. This tells the browser that this label is associated with that select box. When the user clicks the label, the browser will automatically focus the select box. It's also essential for accessibility: a screen reader will announce the label caption when the user focuses the select box.
+Tyypillisesti, laitat jokaisen `<select>`-komponentin [`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label) tagin sisälle. Tämä kertoo selaimelle, että tämä otsikko on yhdistetty tähän valintalistaan. Kun käyttäjä klikkaa otsikkoa, selain kohdistaa automaattisesti valintalistan. Tämä on myös olennaista saavutettavuuden kannalta: ruudunlukija ilmoittaa otsikon kuvauksen kun käyttäjä kohdistaa valintalistan.
 
 If you can't nest `<select>` into a `<label>`, associate them by passing the same ID to `<select id>` and [`<label htmlFor>`.](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor) To avoid conflicts between multiple instances of one component, generate such an ID with [`useId`.](/reference/react/useId)
 
+Jos et voi sijoittaaa `<select>`-komponenttia `<label>`-komponentin sisään, yhdistä ne antamalla sama ID `<select id>`:lle ja [`<label htmlFor>`.](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor) Välttääksesi konflikteja useiden saman komponentin instanssien välillä, generoi tällainen ID [`useId`-komponentilla.](/reference/react/useId)
+
 <Sandpack>
 
 ```js
@@ -123,21 +125,21 @@ export default function Form() {
   return (
     <>
       <label>
-        Pick a fruit:
+        Valitse hedelmä:
         <select name="selectedFruit">
-          <option value="apple">Apple</option>
-          <option value="banana">Banana</option>
-          <option value="orange">Orange</option>
+          <option value="apple">Omena</option>
+          <option value="banana">Banaani</option>
+          <option value="orange">Appelsiini</option>
         </select>
       </label>
       <hr />
       <label htmlFor={vegetableSelectId}>
-        Pick a vegetable:
+        Valitse vihannes:
       </label>
       <select id={vegetableSelectId} name="selectedVegetable">
-        <option value="cucumber">Cucumber</option>
-        <option value="corn">Corn</option>
-        <option value="tomato">Tomato</option>
+        <option value="cucumber">Kurkku</option>
+        <option value="corn">Maissi</option>
+        <option value="tomato">Tomaatti</option>
       </select>
     </>
   );
@@ -153,9 +155,9 @@ select { margin: 5px; }
 
 ---
 
-### Providing an initially selected option {/*providing-an-initially-selected-option*/}
+### Aluksi valintun valinnan tarjoaminen {/*providing-an-initially-selected-option*/}
 
-By default, the browser will select the first `<option>` in the list. To select a different option by default, pass that `<option>`'s `value` as the `defaultValue` to the `<select>` element.
+Oletuksena, selain valitsee ensimmäisen `<option>`-komponentin listasta. Valitaksesi eri vaihtoehdon oletuksena, välitä sen `<option>`-komponentin `value`-arvo `<select>`-komponentille `defaultValue`-propsina.
 
 <Sandpack>
 
@@ -163,11 +165,11 @@ By default, the browser will select the first `<option>` in the list. To select
 export default function FruitPicker() {
   return (
     <label>
-      Pick a fruit:
+      Valitse hedelmä:
       <select name="selectedFruit" defaultValue="orange">
-        <option value="apple">Apple</option>
-        <option value="banana">Banana</option>
-        <option value="orange">Orange</option>
+        <option value="apple">Omena</option>
+        <option value="banana">Banaani</option>
+        <option value="orange">Appelsiini</option>
       </select>
     </label>
   );
@@ -182,15 +184,15 @@ select { margin: 5px; }
 
 <Pitfall>
 
-Unlike in HTML, passing a `selected` attribute to an individual `<option>` is not supported.
+Toisin kuin HTML:ssä, `<option>`-komponentin `selected`-attribuutti ei ole tuettu.
 
 </Pitfall>
 
 ---
 
-### Enabling multiple selection {/*enabling-multiple-selection*/}
+### Usean valinnan mahdollistaminen {/*enabling-multiple-selection*/}
 
-Pass `multiple={true}` to the `<select>` to let the user select multiple options. In that case, if you also specify `defaultValue` to choose the initially selected options, it must be an array.
+Välitä `multiple={true}` `<select>`-komponentille, jotta käyttäjä voi valita useita vaihtoehtoja. Tässä tapauksessa, jos määrität myös `defaultValue`-propsin valitaksesi aluksi valitut vaihtoehdot, sen täytyy olla taulukko.
 
 <Sandpack>
 
@@ -198,15 +200,15 @@ Pass `multiple={true}` to the `<select>` to let the user select multiple options
 export default function FruitPicker() {
   return (
     <label>
-      Pick some fruits:
+      Valitse muutama hedelmä:
       <select
         name="selectedFruit"
         defaultValue={['orange', 'banana']}
         multiple={true}
       >
-        <option value="apple">Apple</option>
-        <option value="banana">Banana</option>
-        <option value="orange">Orange</option>
+        <option value="apple">Omena</option>
+        <option value="banana">Banaani</option>
+        <option value="orange">Appelsiini</option>
       </select>
     </label>
   );
@@ -221,55 +223,55 @@ select { display: block; margin-top: 10px; width: 200px; }
 
 ---
 
-### Reading the select box value when submitting a form {/*reading-the-select-box-value-when-submitting-a-form*/}
+### Valintalistan arvon lukeminen lomakkeen lähetyksessä {/*reading-the-select-box-value-when-submitting-a-form*/}
 
-Add a [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) around your select box with a [`<button type="submit">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) inside. It will call your `<form onSubmit>` event handler. By default, the browser will send the form data to the current URL and refresh the page. You can override that behavior by calling `e.preventDefault()`. Read the form data with [`new FormData(e.target)`](https://developer.mozilla.org/en-US/docs/Web/API/FormData).
+Lisää [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) valintalistan ympärille, jossa on [`<button type="submit">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) sisällä. Se kutsuu `<form onSubmit>`-käsittelijäfunktiota. Oletuksena, selain lähettää lomakkeen datan nykyiseen URL:iin ja päivittää sivun. Voit ohittaa tämän käyttäytymisen kutsumalla `e.preventDefault()`. Lue lomakkeen data [`new FormData(e.target)`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) avulla.
 <Sandpack>
 
 ```js
 export default function EditPost() {
   function handleSubmit(e) {
-    // Prevent the browser from reloading the page
+    // Estä selainta lataamasta sivua uudelleen
     e.preventDefault();
-    // Read the form data
+    // Lue lomakkeen data
     const form = e.target;
     const formData = new FormData(form);
-    // You can pass formData as a fetch body directly:
+    // Voit välittää formData:n suoraan fetchin bodylle:
     fetch('/some-api', { method: form.method, body: formData });
-    // You can generate a URL out of it, as the browser does by default:
+    // Voit generoida siitä URL:n, kuten selain tekee oletuksena:
     console.log(new URLSearchParams(formData).toString());
-    // You can work with it as a plain object.
+    // Voit käsitellä sitä tavallisena oliona.
     const formJson = Object.fromEntries(formData.entries());
-    console.log(formJson); // (!) This doesn't include multiple select values
-    // Or you can get an array of name-value pairs.
+    console.log(formJson); // (!) Tämä ei sisällä usean valinnan arvoja
+    // Tai voit saada nimi-arvo parien taulukon.
     console.log([...formData.entries()]);
   }
 
   return (
     <form method="post" onSubmit={handleSubmit}>
       <label>
-        Pick your favorite fruit:
+        Valitse lempihedelmäsi:
         <select name="selectedFruit" defaultValue="orange">
-          <option value="apple">Apple</option>
-          <option value="banana">Banana</option>
-          <option value="orange">Orange</option>
+          <option value="apple">Omena</option>
+          <option value="banana">Banaani</option>
+          <option value="orange">Appelsiini</option>
         </select>
       </label>
       <label>
-        Pick all your favorite vegetables:
+        Valitse kaikki lempivihanneksesi:
         <select
           name="selectedVegetables"
           multiple={true}
           defaultValue={['corn', 'tomato']}
         >
-          <option value="cucumber">Cucumber</option>
-          <option value="corn">Corn</option>
-          <option value="tomato">Tomato</option>
+          <option value="cucumber">Kurkku</option>
+          <option value="corn">Maissi</option>
+          <option value="tomato">Tomaatti</option>
         </select>
       </label>
       <hr />
-      <button type="reset">Reset</button>
-      <button type="submit">Submit</button>
+      <button type="reset">Nollaa</button>
+      <button type="submit">Lähetä</button>
     </form>
   );
 }
@@ -284,44 +286,46 @@ label { margin-bottom: 20px; }
 
 <Note>
 
-Give a `name` to your `<select>`, for example `<select name="selectedFruit" />`. The `name` you specified will be used as a key in the form data, for example `{ selectedFruit: "orange" }`.
+Anna `<select>`:lle `name`, esimerkiksi `<select name="selectedFruit" />`. Määrittelemäsi `name` käytetään avaimena lomakkeen datassa, esimerkiksi `{ selectedFruit: "orange" }`.
 
-If you use `<select multiple={true}>`, the [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) you'll read from the form will include each selected value as a separate name-value pair. Look closely at the console logs in the example above.
+Jos käytät `<select multiple={true}>`, [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) jota luet lomakkeesta sisältää jokaisen valitun arvon erillisenä nimi-arvo parina. Katso tarkasti konsolin lokeja yllä olevassa esimerkissä.
 
 </Note>
 
 <Pitfall>
 
-By default, *any* `<button>` inside a `<form>` will submit it. This can be surprising! If you have your own custom `Button` React component, consider returning [`<button type="button">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/button) instead of `<button>`. Then, to be explicit, use `<button type="submit">` for buttons that *are* supposed to submit the form.
+Oletuksena, *mikä tahansa*  `<form>`:n sisällä oleva `<button>` lähettää sen. Tämä voi olla yllättävää! Jos sinulla on oma `Button` React-komponentti, harkitse [`<button type="button">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/button) palauttamista `<button>`:n sijaan. Sitten, ollaksesi eksplisiittinen, käytä `<button type="submit">` painikkeisiin, joiden *on* tarkoitus lähettää lomake.
 
 </Pitfall>
 
 ---
 
-### Controlling a select box with a state variable {/*controlling-a-select-box-with-a-state-variable*/}
+### Valintalistan ohjaaminen tilamuuttujalla {/*controlling-a-select-box-with-a-state-variable*/}
 
-A select box like `<select />` is *uncontrolled.* Even if you [pass an initially selected value](#providing-an-initially-selected-option) like `<select defaultValue="orange" />`, your JSX only specifies the initial value, not the value right now.
+Valintalista kuten `<select />` on *kontrolloimaton*. Vaikka [välittäisit aluksi valitun arvon](#providing-an-initially-selected-option) kuten `<select defaultValue="orange" />`, JSX:si määrittelee vain aluksi valitun arvon, ei arvoa juuri nyt.
 
 **To render a _controlled_ select box, pass the `value` prop to it.** React will force the select box to always have the `value` you passed. Typically, you will control a select box by declaring a [state variable:](/reference/react/useState)
 
+**Renderöidäksesi _kontrolloidun_ valintalistan, välitä sille `value`-propsi.** React pakottaa valintalistan aina sisältämään välittämäsi `value`-arvon. Tyypillisesti, ohjaat valintalistaa määrittämällä [tilamuuttujan:](/reference/react/useState)
+
 ```js {2,6,7}
 function FruitPicker() {
-  const [selectedFruit, setSelectedFruit] = useState('orange'); // Declare a state variable...
+  const [selectedFruit, setSelectedFruit] = useState('orange'); // Määritä tilamuuttuja...
   // ...
   return (
     <select
-      value={selectedFruit} // ...force the select's value to match the state variable...
-      onChange={e => setSelectedFruit(e.target.value)} // ... and update the state variable on any change!
+      value={selectedFruit} // ...pakota valintalistan arvo vastaamaan tilamuuttujaa...
+      onChange={e => setSelectedFruit(e.target.value)} // ... ja päivitä tilamuuttuja muutoksissa!
     >
-      <option value="apple">Apple</option>
-      <option value="banana">Banana</option>
-      <option value="orange">Orange</option>
+      <option value="apple">Omena</option>
+      <option value="banana">Banaani</option>
+      <option value="orange">Appelsiini</option>
     </select>
   );
 }
 ```
 
-This is useful if you want to re-render some part of the UI in response to every selection.
+Tämä on hyödyllistä, jos haluat renderöidä uudelleen osan käyttöliittymästä jokaisen valinnan jälkeen.
 
 <Sandpack>
 
@@ -334,19 +338,19 @@ export default function FruitPicker() {
   return (
     <>
       <label>
-        Pick a fruit:
+        Valitse hedelmä:
         <select
           value={selectedFruit}
           onChange={e => setSelectedFruit(e.target.value)}
         >
-          <option value="apple">Apple</option>
-          <option value="banana">Banana</option>
-          <option value="orange">Orange</option>
+          <option value="apple">Omena</option>
+          <option value="banana">Banaani</option>
+          <option value="orange">Appelsiini</option>
         </select>
       </label>
       <hr />
       <label>
-        Pick all your favorite vegetables:
+        Valitse kaikki lempivihanneksesi:
         <select
           multiple={true}
           value={selectedVegs}
@@ -356,14 +360,14 @@ export default function FruitPicker() {
             setSelectedVegs(values);
           }}
         >
-          <option value="cucumber">Cucumber</option>
-          <option value="corn">Corn</option>
-          <option value="tomato">Tomato</option>
+          <option value="cucumber">Kurkku</option>
+          <option value="corn">Maissi</option>
+          <option value="tomato">Tomaatti</option>
         </select>
       </label>
       <hr />
-      <p>Your favorite fruit: {selectedFruit}</p>
-      <p>Your favorite vegetables: {selectedVegs.join(', ')}</p>
+      <p>Lempihedelmäsi: {selectedFruit}</p>
+      <p>Lempivihanneksesi: {selectedVegs.join(', ')}</p>
     </>
   );
 }
@@ -377,8 +381,8 @@ select { margin-bottom: 10px; display: block; }
 
 <Pitfall>
 
-**If you pass `value` without `onChange`, it will be impossible to select an option.** When you control a select box by passing some `value` to it, you *force* it to always have the value you passed. So if you pass a state variable as a `value` but forget to update that state variable synchronously during the `onChange` event handler, React will revert the select box after every keystroke back to the `value` that you specified.
+**Jos välität `value`:n ilman `onChange`:a, vaihtoehdon valitseminen on mahdotonta.** Kun ohjaat valintalistaa välittämällä sille `value`:n, *pakotat* sen aina sisältämään välittämäsi arvon. Joten jos välität tilamuuttujan `value`:na mutta unohdat päivittää tilamuuttujaa synkronisesti `onChange`-käsittelijäfunktion aikana, React palauttaa valintalistan jokaisen näppäinpainalluksen jälkeen takaisin `value`:n, jonka määritit.
 
-Unlike in HTML, passing a `selected` attribute to an individual `<option>` is not supported.
+Toisin kuin HTML:ssä, `<option>`-komponentin `selected`-attribuutti ei ole tuettu.
 
 </Pitfall>
diff --git a/src/content/reference/react-dom/components/textarea.md b/src/content/reference/react-dom/components/textarea.md
index db479485f..247c67a7f 100644
--- a/src/content/reference/react-dom/components/textarea.md
+++ b/src/content/reference/react-dom/components/textarea.md
@@ -4,7 +4,7 @@ title: "<textarea>"
 
 <Intro>
 
-The [built-in browser `<textarea>` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) lets you render a multiline text input.
+[Selaimen sisäänrakennettu `<textarea>`-komponentti](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) mahdollistaa monirivisen tekstisyötteen renderöimisen.
 
 ```js
 <textarea />
@@ -20,68 +20,68 @@ The [built-in browser `<textarea>` component](https://developer.mozilla.org/en-U
 
 ### `<textarea>` {/*textarea*/}
 
-To display a text area, render the [built-in browser `<textarea>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) component.
+Näyttääksesi tekstikentän, renderöi [selaimen sisäänrakennettu `<textarea>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea)-komponentti.
 
 ```js
 <textarea name="postContent" />
 ```
 
-[See more examples below.](#usage)
+[Näe lisää esimerkkejä alla.](#usage)
 
 #### Propsit {/*props*/}
 
-`<textarea>` supports all [common element props.](/reference/react-dom/components/common#props)
+`<textarea>` tukee kaikkia [yleisten elementtien propseja.](/reference/react-dom/components/common#props)
 
-You can [make a text area controlled](#controlling-a-text-area-with-a-state-variable) by passing a `value` prop:
+Voit tehdä [tekstikentästä kontrolloidun](#controlling-a-text-area-with-a-state-variable) välittämällä `value` propsin:
 
-* `value`: A string. Controls the text inside the text area.
+* `value`: Merkkijono. Kontrolloi tekstikentän tekstiä..
 
-When you pass `value`, you must also pass an `onChange` handler that updates the passed value.
+Kun välität `value`-arvon, sinun täytyy myös välittää `onChange`-käsittelijä, joka päivittää välitetyn arvon.
 
-If your `<textarea>` is uncontrolled, you may pass the `defaultValue` prop instead:
+Jos `<textarea>` on kontrolloimaton, voit välittää `defaultValue`-propsin sen sijaan:
 
-* `defaultValue`: A string. Specifies [the initial value](#providing-an-initial-value-for-a-text-area) for a text area.
+* `defaultValue`: Merkkijono. Määrittelee [oletusarvon](#providing-an-initial-value-for-a-text-area) tekstikentälle.
 
-These `<textarea>` props are relevant both for uncontrolled and controlled text areas:
+Nämä `<textarea>`-propsit ovat relevantteja sekä kontrolloimattomille että kontrolloiduille tekstikentille:
 
-* [`autoComplete`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#autocomplete): Either `'on'` or `'off'`. Specifies the autocomplete behavior.
-* [`autoFocus`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#autofocus): A boolean. If `true`, React will focus the element on mount.
-* `children`: `<textarea>` does not accept children. To set the initial value, use `defaultValue`.
-* [`cols`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#cols): A number. Specifies the default width in average character widths. Defaults to `20`.
-* [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#disabled): A boolean. If `true`, the input will not be interactive and will appear dimmed.
-* [`form`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#form): A string. Specifies the `id` of the `<form>` this input belongs to. If omitted, it's the closest parent form.
-* [`maxLength`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#maxlength): A number. Specifies the maximum length of text.
-* [`minLength`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#minlength): A number. Specifies the minimum length of text.
-* [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name): A string. Specifies the name for this input that's [submitted with the form.](#reading-the-textarea-value-when-submitting-a-form)
-* `onChange`: An [`Event` handler](/reference/react-dom/components/common#event-handler) function. Required for [controlled text areas.](#controlling-a-text-area-with-a-state-variable) Fires immediately when the input's value is changed by the user (for example, it fires on every keystroke). Behaves like the browser [`input` event.](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event)
-* `onChangeCapture`: A version of `onChange` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`onInput`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event): An [`Event` handler](/reference/react-dom/components/common#event-handler) function. function. Fires immediately when the value is changed by the user. For historical reasons, in React it is idiomatic to use `onChange` instead which works similarly.
-* `onInputCapture`: A version of `onInput` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`onInvalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event): An [`Event` handler](/reference/react-dom/components/common#event-handler) function. Fires if an input fails validation on form submit. Unlike the built-in `invalid` event, the React `onInvalid` event bubbles.
-* `onInvalidCapture`: A version of `onInvalid` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`onSelect`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement/select_event): An [`Event` handler](/reference/react-dom/components/common#event-handler) function. Fires after the selection inside the `<textarea>` changes. React extends the `onSelect` event to also fire for empty selection and on edits (which may affect the selection).
-* `onSelectCapture`: A version of `onSelect` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`placeholder`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#placeholder): A string. Displayed in a dimmed color when the text area value is empty.
-* [`readOnly`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#readonly): A boolean. If `true`, the text area is not editable by the user.
-* [`required`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#required): A boolean. If `true`, the value must be provided for the form to submit.
-* [`rows`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#rows): A number. Specifies the default height in average character heights. Defaults to `2`.
-* [`wrap`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#wrap): Either `'hard'`, `'soft'`, or `'off'`. Specifies how the text should be wrapped when submitting a form.
+* [`autoComplete`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#autocomplete): Joko `'on'` tai `'off'`. Määrittelee automaattisen täydentämisen käyttäytymistä.
+* [`autoFocus`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#autofocus): Totuusarvo. Jos `true`, React kohdistaa elementtiin mountatessa.
+* `children`: `<textarea>` ei hyväksy lapsia. Oletusarvon asettamiseksi, käytä `defaultValue`.
+* [`cols`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#cols): Numero. Määrittää oletusleveyden keskimääräisinä merkkileveyksinä. Oletuksena arvoltaan `20`.
+* [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#disabled): Totuusarvo. Jos `true`, kenttä ei ole interaktiivinen ja näkyy himmennettynä.
+* [`form`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#form): Merkkijono. Määrittää `<form>` lomakkeen `id` :n johon tämä kenttä kuuluu. Jos jätetty pois, se on lähin ylätason lomake.
+* [`maxLength`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#maxlength): Numero. Määrittää tekstin enimmäispituuden.
+* [`minLength`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#minlength): Numero. Määrittää tekstin vähimmäispituuden.
+* [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name): Merkkijono. Määrittää nimen tälle kentälle, joka [lähetetään lomakkeessa.](#reading-the-textarea-value-when-submitting-a-form)
+* `onChange`: [`Event` käsittelijäfunktio](/reference/react-dom/components/common#event-handler). Vaaditaan [kontrolloituihin tekstikenttiin.](#controlling-a-text-area-with-a-state-variable) Suoritetaan heti kun käyttäjä muuttaa kentän arvoa (esimerkiksi, suoritetaan jokaisella näppäinpainalluksella). Käyttäytyy kuten selaimen [`input` tapahtuma.](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event)
+* `onChangeCapture`: Versio `onChange`:sta, joka suoritetaan [capture phase.](/learn/responding-to-events#capture-phase-events)
+* [`onInput`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event): [`Event` käsittelijäfunktio](/reference/react-dom/components/common#event-handler). Suoritetaan heti kun käyttäjä muuttaa kentän arvoa. Historiallisista syistä, Reactissa on idiomaattista käyttää tämän tilalla `onChange`, joka toimii samanlaisesti.
+* `onInputCapture`: Versio `onInput`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+* [`onInvalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event): [`Event` käsittelijäfunktio](/reference/react-dom/components/common#event-handler). Suoritetaan jos syöte ei läpäise validointia lomaketta lähetettäessä. Toisin kuin selaimen sisäänrakennettu `invalid`-tapahtuma, Reactin `onInvalid`-tapahtuma kuplii.
+* `onInvalidCapture`: Versio `onInvalid`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+* [`onSelect`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement/select_event): [`Event` käsittelijäfunktio](/reference/react-dom/components/common#event-handler). Suoritetaan kun valinta `<textarea>`:n sisällä muuttuu. React laajentaa `onSelect`-tapahtuman myös tyhjälle valinnalle ja muokkauksille (jotka voivat vaikuttaa valintaan).
+* `onSelectCapture`: Versio `onSelect`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+* [`placeholder`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#placeholder): Merkkijono. Näytetään himmennetyllä värillä kun kenttä on tyhjä.
+* [`readOnly`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#readonly): Totuusarvo. Jos `true`, kenttä ei ole käyttäjän muokattavissa.
+* [`required`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#required): Totuusarvo. Jos `true`, arvon on oltava lomaketta lähettäessä.
+* [`rows`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#rows): Numero. Määrittää oletuskorkeuden keskimääräisinä merkkikorkeuksina. Oletuksena arvoltaan `2`.
+* [`wrap`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#wrap): Joko `'hard'`, `'soft'`, tai `'off'`. Määrittää miten tekstin tulisi rivittyä lomaketta lähettäessä.
 
 #### Rajoitukset {/*caveats*/}
 
-- Passing children like `<textarea>something</textarea>` is not allowed. [Use `defaultValue` for initial content.](#providing-an-initial-value-for-a-text-area)
-- If a text area receives a string `value` prop, it will be [treated as controlled.](#controlling-a-text-area-with-a-state-variable)
-- A text area can't be both controlled and uncontrolled at the same time.
-- A text area cannot switch between being controlled or uncontrolled over its lifetime.
-- Every controlled text area needs an `onChange` event handler that synchronously updates its backing value.
+- Lapsien välittäminen kuten `<textarea>something</textarea>` ei ole sallittua. [Käytä `defaultValue`-arvoa alustukselle.](#providing-an-initial-value-for-a-text-area)
+- Jos kenttä vastaanottaa merkkijonon `value`-propsissa, se [käsitellään kontrolloituna.](#controlling-a-text-area-with-a-state-variable)
+- Kenttä ei voi olla sekä kontrolloitu että kontrolloimaton samaan aikaan.
+- Kenttä ei voi vaihtaa kontrolloidusta kontrolloimattomaksi elinkaarensa aikana.
+- Jokainen kontrolloitu tekstikenttä tarvitsee `onChange`-käsittelijän, joka päivittää sen arvon synkronisesti.
 
 ---
 
 ## Käyttö {/*usage*/}
 
-### Displaying a text area {/*displaying-a-text-area*/}
+### Tekstikentän näyttäminen {/*displaying-a-text-area*/}
 
-Render `<textarea>` to display a text area. You can specify its default size with the [`rows`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#rows) and [`cols`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#cols) attributes, but by default the user will be able to resize it. To disable resizing, you can specify `resize: none` in the CSS.
+Renderöi `<textarea>` näyttääksesi tekstikentän. Voit määritellä sen oletuskoon [`rows`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#rows) ja [`cols`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#cols) attribuuteilla, mutta oletuksena käyttäjä voi muuttaa sen kokoa. Voit estää muuttamisen, voit määritellä `resize: none` CSS:ssä.
 
 <Sandpack>
 
@@ -89,7 +89,7 @@ Render `<textarea>` to display a text area. You can specify its default size wit
 export default function NewPost() {
   return (
     <label>
-      Write your post:
+      Kirjoita julkaisusi:
       <textarea name="postContent" rows={4} cols={40} />
     </label>
   );
@@ -107,11 +107,11 @@ label, textarea { display: block; }
 
 ---
 
-### Providing a label for a text area {/*providing-a-label-for-a-text-area*/}
+### Otsikon tarjoaminen tekstikentälle {/*providing-a-label-for-a-text-area*/}
 
-Typically, you will place every `<textarea>` inside a [`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label) tag. This tells the browser that this label is associated with that text area. When the user clicks the label, the browser will focus the text area. It's also essential for accessibility: a screen reader will announce the label caption when the user focuses the text area.
+Tyypillisesti, asetat jokaisen `<textarea>`-komponentin [`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)-komponentin sisään. Tämä kertoo selaimelle, että tämä otsikko on yhdistetty tähän tekstikenttään. Kun käyttäjä klikkaa otsikkoa, selain kohdistaa tekstikenttään. Tämä on myös tärkeää saavutettavuuden kannalta: ruudunlukija lukee otsikon ääneen, kun käyttäjä kohdistaa tekstikenttään.
 
-If you can't nest `<textarea>` into a `<label>`, associate them by passing the same ID to `<textarea id>` and [`<label htmlFor>`.](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor) To avoid conflicts between instances of one component, generate such an ID with [`useId`.](/reference/react/useId)
+Jos et voi sijoittaa `<textarea>`-komponenttia `<label>`-komponentin sisään, yhdistä ne välittämällä sama ID `<textarea id>`:lle ja [`<label htmlFor>`:lle.](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor) Välttääksesi konflikteja yhden komponentin instanssien välillä, generoi tällainen ID [`useId`-hookilla.](/reference/react/useId)
 
 <Sandpack>
 
@@ -144,9 +144,9 @@ input { margin: 5px; }
 
 ---
 
-### Providing an initial value for a text area {/*providing-an-initial-value-for-a-text-area*/}
+### Oletusarvon tarjoaminen tekstikentälle {/*providing-an-initial-value-for-a-text-area*/}
 
-You can optionally specify the initial value for the text area. Pass it as the `defaultValue` string.
+Voit vaihtoehtoisesti määritellä oletusarvon tekstikentälle. Välitä se `defaultValue`-merkkijonona.
 
 <Sandpack>
 
@@ -154,10 +154,10 @@ You can optionally specify the initial value for the text area. Pass it as the `
 export default function EditPost() {
   return (
     <label>
-      Edit your post:
+      Muokkaa julkaisuasi:
       <textarea
         name="postContent"
-        defaultValue="I really enjoyed biking yesterday!"
+        defaultValue="Tykkäsin pyöräilystä eilen!"
         rows={4}
         cols={40}
       />
@@ -177,31 +177,31 @@ label, textarea { display: block; }
 
 <Pitfall>
 
-Unlike in HTML, passing initial text like `<textarea>Some content</textarea>` is not supported.
+Toisin kuin HTML:ssä, oletustekstin välittäminen `<textarea>Some content</textarea>` ei ole tuettu.
 
 </Pitfall>
 
 ---
 
-### Reading the text area value when submitting a form {/*reading-the-text-area-value-when-submitting-a-form*/}
+### Tekstikentän arvon lukeminen lomaketta lähettäessä {/*reading-the-text-area-value-when-submitting-a-form*/}
 
-Add a [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) around your textarea with a [`<button type="submit">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) inside. It will call your `<form onSubmit>` event handler. By default, the browser will send the form data to the current URL and refresh the page. You can override that behavior by calling `e.preventDefault()`. Read the form data with [`new FormData(e.target)`](https://developer.mozilla.org/en-US/docs/Web/API/FormData).
+Lisää [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) tekstikentän ympärille, jossa on [`<button type="submit">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) sisällä. Se kutsuu `<form onSubmit>`-käsittelijää. Oletuksena, selain lähettää lomakkeen datan nykyiseen URL:iin ja päivittää sivun. Voit ohittaa tämän käyttäytymisen kutsumalla `e.preventDefault()`. Lue lomakkeen data [`new FormData(e.target)`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) avulla.
 <Sandpack>
 
 ```js
 export default function EditPost() {
   function handleSubmit(e) {
-    // Prevent the browser from reloading the page
+    // Estä selainta lataamasta sivua uudelleen
     e.preventDefault();
 
-    // Read the form data
+    // Lue lomakkeen data
     const form = e.target;
     const formData = new FormData(form);
 
-    // You can pass formData as a fetch body directly:
+    // Voit välittää formData:n suoraan fetchin bodylle:
     fetch('/some-api', { method: form.method, body: formData });
 
-    // Or you can work with it as a plain object:
+    // Tai voit käsitellä sitä tavallisena oliona:
     const formJson = Object.fromEntries(formData.entries());
     console.log(formJson);
   }
@@ -209,20 +209,20 @@ export default function EditPost() {
   return (
     <form method="post" onSubmit={handleSubmit}>
       <label>
-        Post title: <input name="postTitle" defaultValue="Biking" />
+        Julkaisun otsikko: <input name="postTitle" defaultValue="Pyöräily" />
       </label>
       <label>
-        Edit your post:
+        Muokkaa julkaisua:
         <textarea
           name="postContent"
-          defaultValue="I really enjoyed biking yesterday!"
+          defaultValue="Tykkäsin pyöräilystä eilen!"
           rows={4}
           cols={40}
         />
       </label>
       <hr />
-      <button type="reset">Reset edits</button>
-      <button type="submit">Save post</button>
+      <button type="reset">Nollaa muokkaukset</button>
+      <button type="submit">Tallenna julkaisu</button>
     </form>
   );
 }
@@ -237,38 +237,38 @@ input { margin: 5px; }
 
 <Note>
 
-Give a `name` to your `<textarea>`, for example `<textarea name="postContent" />`. The `name` you specified will be used as a key in the form data, for example `{ postContent: "Your post" }`.
+Anna `<textarea>`:lle `name`, esimerkiksi `<textarea name="postContent" />`. `name`-arvoa käytetään avaimena lomakkeen datassa, esimerkiksi `{ postContent: "Julkaisusi" }`.
 
 </Note>
 
 <Pitfall>
 
-By default, *any* `<button>` inside a `<form>` will submit it. This can be surprising! If you have your own custom `Button` React component, consider returning [`<button type="button">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/button) instead of `<button>`. Then, to be explicit, use `<button type="submit">` for buttons that *are* supposed to submit the form.
+Oletuksena, *mikä tahansa*  `<form>`:n sisällä oleva `<button>` lähettää sen. Tämä voi olla yllättävää! Jos sinulla on oma `Button` React-komponentti, harkitse [`<button type="button">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/button) palauttamista `<button>`:n sijaan. Sitten, ollaksesi eksplisiittinen, käytä `<button type="submit">` painikkeisiin, joiden *on* tarkoitus lähettää lomake.
 
 </Pitfall>
 
 ---
 
-### Controlling a text area with a state variable {/*controlling-a-text-area-with-a-state-variable*/}
+### Tekstikentän ohjaaminen tilamuuttujalla {/*controlling-a-text-area-with-a-state-variable*/}
 
-A text area like `<textarea />` is *uncontrolled.* Even if you [pass an initial value](#providing-an-initial-value-for-a-text-area) like `<textarea defaultValue="Initial text" />`, your JSX only specifies the initial value, not the value right now.
+Tekstikenttä kuten `<textarea />` on *kontrolloimaton*. Vaikka [välittäisit oletusarvon](#providing-an-initial-value-for-a-text-area) kuten `<textarea defaultValue="Alkuteksti" />`, JSX määrittelee vain oletusarvon, ei arvoa juuri nyt.
 
-**To render a _controlled_ text area, pass the `value` prop to it.** React will force the text area to always have the `value` you passed. Typically, you will control a text area by declaring a [state variable:](/reference/react/useState)
+**Renderöidäksesi _kontrolloidun_ tekstikentän, välitä `value`-prop sille.** React pakottaa tekstikentän aina sisältämään välittämäsi `value`-arvon. Tyypillisesti, ohjaat tekstikenttää määrittämällä [tilamuuttujan:](/reference/react/useState)
 
 ```js {2,6,7}
 function NewPost() {
-  const [postContent, setPostContent] = useState(''); // Declare a state variable...
+  const [postContent, setPostContent] = useState(''); // Määrittele tilamuuttuja...
   // ...
   return (
     <textarea
-      value={postContent} // ...force the input's value to match the state variable...
-      onChange={e => setPostContent(e.target.value)} // ... and update the state variable on any edits!
+      value={postContent} // ...pakota kentän arvo vastaamaan tilamuuttujaa...
+      onChange={e => setPostContent(e.target.value)} // ... ja päivitä tilamuuttuja muutoksissa!
     />
   );
 }
 ```
 
-This is useful if you want to re-render some part of the UI in response to every keystroke.
+Tämä on hyödyllistä, jos haluat renderöidä uudelleen osan käyttöliittymästä jokaisella näppäinpainalluksella.
 
 <Sandpack>
 
@@ -277,11 +277,11 @@ import { useState } from 'react';
 import MarkdownPreview from './MarkdownPreview.js';
 
 export default function MarkdownEditor() {
-  const [postContent, setPostContent] = useState('_Hello,_ **Markdown**!');
+  const [postContent, setPostContent] = useState('_Hei,_ **Markdown**!');
   return (
     <>
       <label>
-        Enter some markdown:
+        Syötä markdown koodia:
         <textarea
           value={postContent}
           onChange={e => setPostContent(e.target.value)}
@@ -330,7 +330,7 @@ textarea { display: block; margin-top: 5px; margin-bottom: 10px; }
 
 <Pitfall>
 
-**If you pass `value` without `onChange`, it will be impossible to type into the text area.** When you control an text area by passing some `value` to it, you *force* it to always have the value you passed. So if you pass a state variable as a `value` but forget to update that state variable synchronously during the `onChange` event handler, React will revert the text area after every keystroke back to the `value` that you specified.
+**Jos välität `value`:n ilman `onChange`:a, tekstikenttään ei voi kirjoittaa.** Kun kontrolloit tekstikenttää välittämällä sille `value`:n, *pakotat* sen aina sisältämään välittämäsi arvon. Joten jos välität tilamuuttujan `value`:ksi mutta unohdat päivittää tilamuuttujaa synkronisesti `onChange`-käsittelijässä, React palauttaa tekstikentän jokaisen näppäinpainalluksen jälkeen takaisin `value`:ksi, jonka välitit.
 
 </Pitfall>
 
@@ -338,12 +338,12 @@ textarea { display: block; margin-top: 5px; margin-bottom: 10px; }
 
 ## Vianmääritys {/*troubleshooting*/}
 
-### My text area doesn't update when I type into it {/*my-text-area-doesnt-update-when-i-type-into-it*/}
+### Tekstikenttäni ei päivity kun kirjoitan siihen {/*my-text-area-doesnt-update-when-i-type-into-it*/}
 
-If you render a text area with `value` but no `onChange`, you will see an error in the console:
+Jos renderöit tekstikentän `value`:lla mutta ilman `onChange`:a, näet virheen konsolissa:
 
 ```js
-// 🔴 Bug: controlled text area with no onChange handler
+// 🔴 Bugi: kontrolloitu tekstikenttä ilman onChange käsittelijää
 <textarea value={something} />
 ```
 
@@ -353,71 +353,73 @@ You provided a `value` prop to a form field without an `onChange` handler. This
 
 </ConsoleBlock>
 
-As the error message suggests, if you only wanted to [specify the *initial* value,](#providing-an-initial-value-for-a-text-area) pass `defaultValue` instead:
+Kuten virheviesti ehdottaa, jos haluat vain [määrittää *alkuarvon*,](#providing-an-initial-value-for-a-text-area) välitä `defaultValue` sen sijaan:
 
 ```js
-// ✅ Good: uncontrolled text area with an initial value
+// ✅ Hyvä: kontrolloimaton tekstikenttä oletusarvolla
 <textarea defaultValue={something} />
 ```
 
 If you want [to control this text area with a state variable,](#controlling-a-text-area-with-a-state-variable) specify an `onChange` handler:
 
+Jos haluat [ohjata tätä tekstikenttää tilamuuttujalla,](#controlling-a-text-area-with-a-state-variable) määrittele `onChange`-käsittelijä:
+
 ```js
-// ✅ Good: controlled text area with onChange
+// ✅ Hyvä: kontrolloitu tekstikenttö onChange:lla
 <textarea value={something} onChange={e => setSomething(e.target.value)} />
 ```
 
-If the value is intentionally read-only, add a `readOnly` prop to suppress the error:
+Jos arvo on tarkoituksella vain-luku -tilassa, lisää `readOnly`-propsi virheen poistamiseksi:
 
 ```js
-// ✅ Good: readonly controlled text area without on change
+// ✅ Hyvä: vain-luku tilassa oleva kontrolloitu tekstikenttä ilman muutoksenkäsittelijää
 <textarea value={something} readOnly={true} />
 ```
 
 ---
 
-### My text area caret jumps to the beginning on every keystroke {/*my-text-area-caret-jumps-to-the-beginning-on-every-keystroke*/}
+### Tekstikentän kursori hyppää alkuun jokaisen näppäinpainalluksen yhteydessä {/*my-text-area-caret-jumps-to-the-beginning-on-every-keystroke*/}
 
-If you [control a text area,](#controlling-a-text-area-with-a-state-variable) you must update its state variable to the text area's value from the DOM during `onChange`.
+Jos [kontrolloit tekstikenttää,](#controlling-a-text-area-with-a-state-variable) sinun täytyy päivittää sen tilamuuttuja tekstikentän arvolla DOM:sta `onChange`:ssa.
 
-You can't update it to something other than `e.target.value`:
+Et voi päivittää sitä joksikin muuksi kuin `e.target.value`:
 
 ```js
 function handleChange(e) {
-  // 🔴 Bug: updating an input to something other than e.target.value
+  // 🔴 Bugi: kentän päivittäminen joksikin muuksi kuin e.target.value
   setFirstName(e.target.value.toUpperCase());
 }
 ```
 
-You also can't update it asynchronously:
+Et voi päivittää sitä asynkronisesti:
 
 ```js
 function handleChange(e) {
-  // 🔴 Bug: updating an input asynchronously
+  // 🔴 Bugi: kentän päivittäminen asynkronisesti
   setTimeout(() => {
     setFirstName(e.target.value);
   }, 100);
 }
 ```
 
-To fix your code, update it synchronously to `e.target.value`:
+Korjataksesi koodin, päivitä se synkronisesti `e.target.value`:lla:
 
 ```js
 function handleChange(e) {
-  // ✅ Updating a controlled input to e.target.value synchronously
+  // ✅ Kontrolloidun kentän päivittäminen e.target.value:lla synkronisesti
   setFirstName(e.target.value);
 }
 ```
 
-If this doesn't fix the problem, it's possible that the text area gets removed and re-added from the DOM on every keystroke. This can happen if you're accidentally [resetting state](/learn/preserving-and-resetting-state) on every re-render. For example, this can happen if the text area or one of its parents always receives a different `key` attribute, or if you nest component definitions (which is not allowed in React and causes the "inner" component to remount on every render).
+Jos tämä ei korjaa ongelmaa, on mahdollista, että tekstikenttä poistetaan ja lisätään takaisin DOM:iin jokaisen näppäinpainalluksen yhteydessä. Tämä voi tapahtua jos vahingossa [nollaat tilan](/learn/preserving-and-resetting-state) jokaisen uudelleenrenderöinnin yhteydessä. Esimerkiksi, tämä voi tapahtua jos tekstikenttä tai jokin sen vanhemmista saa aina erilaisen `key`-attribuutin, tai jos upotat komponenttimäärittelyjä (joka ei ole sallittua Reactissa ja aiheuttaa "sisäisen" komponentin uudelleenmounttauksen jokaisella renderöinnillä).
 
 ---
 
-### I'm getting an error: "A component is changing an uncontrolled input to be controlled" {/*im-getting-an-error-a-component-is-changing-an-uncontrolled-input-to-be-controlled*/}
+### Saan virheen: "A component is changing an uncontrolled input to be controlled" {/*im-getting-an-error-a-component-is-changing-an-uncontrolled-input-to-be-controlled*/}
 
 
-If you provide a `value` to the component, it must remain a string throughout its lifetime.
+Jos tarjoat `value`:n komponentille, sen täytyy pysyä merkkijonona koko elinkaarensa ajan.
 
-You cannot pass `value={undefined}` first and later pass `value="some string"` because React won't know whether you want the component to be uncontrolled or controlled. A controlled component should always receive a string `value`, not `null` or `undefined`.
+Et voi välittää `value={undefined}` ensin ja myöhemmin välittää `value="some string"` koska React ei tiedä haluatko komponentin olevan kontrolloimaton vai kontrolloitu. Kontrolloidun komponentin tulisi aina saada merkkijonona `value`, ei `null` tai `undefined`.
 
-If your `value` is coming from an API or a state variable, it might be initialized to `null` or `undefined`. In that case, either set it to an empty string (`''`) initially, or pass `value={someValue ?? ''}` to ensure `value` is a string.
+Jos `value` tulee API:sta tai tilamuuttujasta, se voi olla alustettu `null` tai `undefined`. Tässä tapauksessa, joko aseta se tyhjäksi merkkijonoksi (`''`) aluksi, tai välitä `value={someValue ?? ''}` varmistaaksesi, että `value` on merkkijono.

From be30a7af65f4080034ce635ec453d2036a5ffb75 Mon Sep 17 00:00:00 2001
From: Miro Rauhala <4082806+mirorauhala@users.noreply.github.com>
Date: Fri, 29 Sep 2023 23:14:23 +0300
Subject: [PATCH 31/34] Translate heading

---
 src/content/reference/react-dom/components/common.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/reference/react-dom/components/common.md b/src/content/reference/react-dom/components/common.md
index 9af49cffc..6b9b7a8dd 100644
--- a/src/content/reference/react-dom/components/common.md
+++ b/src/content/reference/react-dom/components/common.md
@@ -1,5 +1,5 @@
 ---
-title: "Common components (e.g. <div>)"
+title: "Yleiset komponentit (esim <div>)"
 ---
 
 <Intro>

From c5a304ddccf90ff98ccd688edb33e1fbfd89f96a Mon Sep 17 00:00:00 2001
From: Miro Rauhala <4082806+mirorauhala@users.noreply.github.com>
Date: Fri, 29 Sep 2023 23:16:24 +0300
Subject: [PATCH 32/34] Translate directives

---
 src/content/reference/react/directives.md | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/content/reference/react/directives.md b/src/content/reference/react/directives.md
index b323dab1d..94a048be1 100644
--- a/src/content/reference/react/directives.md
+++ b/src/content/reference/react/directives.md
@@ -1,23 +1,23 @@
 ---
-title: "Directives"
+title: "Direktiivit"
 canary: true
 ---
 
 <Canary>
 
-These directives are needed only if you're [using React Server Components](/learn/start-a-new-react-project#bleeding-edge-react-frameworks) or building a library compatible with them.
+Näitä direktiivejä tarvitaan vain, jos [käytät Reactin palvelinkomponentteja](/learn/start-a-new-react-project#bleeding-edge-react-frameworks) tai rakennat kirjastoa, joka on yhteensopiva niiden kanssa.
 
 </Canary>
 
 <Intro>
 
-Directives provide instructions to [bundlers compatible with React Server Components](/learn/start-a-new-react-project#bleeding-edge-react-frameworks).
+Direktiivit tarjoavat ohjeita [Reactin palvelinkomponenttien kanssa yhteensopiville paketointityökaluille](/learn/start-a-new-react-project#bleeding-edge-react-frameworks).
 
 </Intro>
 
 ---
 
-## Source code directives {/*source-code-directives*/}
+## Lähdekoodi-direktiivit {/*source-code-directives*/}
 
-* [`'use client'`](/reference/react/use-client) marks source files whose components execute on the client.
-* [`'use server'`](/reference/react/use-server) marks server-side functions that can be called from client-side code.
\ No newline at end of file
+* [`'use client'`](/reference/react/use-client) merkitsee lähdekooditiedostoja, joiden komponentit suoritetaan asiakaspuolella.
+* [`'use server'`](/reference/react/use-server) merkitsee palvelinpuolen funktioita, joita voidaan kutsua asiakaspuolen koodista.
\ No newline at end of file

From 33af4fc8820f7cb5a70fc07896206ad3afdf546e Mon Sep 17 00:00:00 2001
From: Miro Rauhala <4082806+mirorauhala@users.noreply.github.com>
Date: Fri, 29 Sep 2023 23:22:45 +0300
Subject: [PATCH 33/34] Fix typos

---
 src/content/reference/react-dom/components/common.md | 2 +-
 src/content/reference/react-dom/components/select.md | 6 ++----
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/content/reference/react-dom/components/common.md b/src/content/reference/react-dom/components/common.md
index 6b9b7a8dd..52b5f1912 100644
--- a/src/content/reference/react-dom/components/common.md
+++ b/src/content/reference/react-dom/components/common.md
@@ -61,7 +61,7 @@ Nämä standardit DOM propsit tuetaan myös kaikissa sisäänrakennetuissa kompo
 * [`onAnimationIteration`](https://developer.mozilla.org/en-US/docs/Web/API/Element/animationiteration_event): [`AnimationEvent` käsittelijäfunktio](#animationevent-handler). Suoritetaan kun CSS animaation iteraatio päättyy ja toinen alkaa.
 * `onAnimationIterationCapture`: Versio `onAnimationIteration`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
 * [`onAnimationStart`](https://developer.mozilla.org/en-US/docs/Web/API/Element/animationstart_event): [`AnimationEvent` käsittelijäfunktio](#animationevent-handler). Suoritetaan kun CSS animaatio alkaa.
-* `onAnimationStartCapture`: `onAnimationStart`, but fires in the [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
+* `onAnimationStartCapture`: `onAnimationStart`, mutta suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
 * [`onAuxClick`](https://developer.mozilla.org/en-US/docs/Web/API/Element/auxclick_event): [`MouseEvent` käsittelijäfunktio](#mouseevent-handler). Suoritetaan kun ei-pääpainiketta painetaan.
 * `onAuxClickCapture`: Versio `onAuxClick`:sta joka suoritetaan [nappausvaiheessa.](/learn/responding-to-events#capture-phase-events)
 * `onBeforeInput`: [`InputEvent` käsittelijäfunktio](#inputevent-handler). Suoritetaan ennen muokattavan elementin arvon muuttamista. React ei vielä käytä selaimen [`beforeinput`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforeinput_event) tapahtumaa, vaan yrittää polyfillata sen käyttäen muita eventtejä.
diff --git a/src/content/reference/react-dom/components/select.md b/src/content/reference/react-dom/components/select.md
index 5138f1b9b..681c4d0fc 100644
--- a/src/content/reference/react-dom/components/select.md
+++ b/src/content/reference/react-dom/components/select.md
@@ -52,7 +52,7 @@ Nämä `<select>`-propsit ovat olennaisia sekä kontrolloimattomille että kontr
 
 * [`autoComplete`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#autocomplete): Merkkijono. Määrittää yhden mahdollisista [automaattisen täydennyksen käyttäytymistavoista.](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values)
 * [`autoFocus`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#autofocus): Totuusarvo. Jos `true`, React kohdistaa elementtiin mountatessa.
-* `children`: `<select>` hyväksyy [`<option>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option), [`<optgroup>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup), ja [`<datalist>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist) komponentit lapsina. Boit myös välittää omia komponentteja kunhan ne lopulta renderöivät jonkun sallituista komponenteista. Jos välität omia komponentteja, jotka lopulta renderöivät `<option>` tageja, jokaisen `<option>`:n täytyy omata `value`.
+* `children`: `<select>` hyväksyy [`<option>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option), [`<optgroup>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup), ja [`<datalist>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist) komponentit lapsina. Voit myös välittää omia komponentteja kunhan ne lopulta renderöivät jonkun sallituista komponenteista. Jos välität omia komponentteja, jotka lopulta renderöivät `<option>` tageja, jokaisen `<option>`:n täytyy omata `value`.
 * [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#disabled): Totuusarvo. Jos `true`, valintalista ei ole interaktiivinen ja näkyy himmennettynä.
 * [`form`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#form): Merkkijono. Määrittää `<form>` lomakkeen `id` :n johon tämä kenttä kuuluu. Jos jätetty pois, se on lähin ylätason lomake.
 * [`multiple`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#multiple): Totuusarvo. Jos `true`, selain mahdollistaa [monen vaihtoehdon valinnan.](#enabling-multiple-selection)
@@ -155,7 +155,7 @@ select { margin: 5px; }
 
 ---
 
-### Aluksi valintun valinnan tarjoaminen {/*providing-an-initially-selected-option*/}
+### Aluksi valitun valinnan tarjoaminen {/*providing-an-initially-selected-option*/}
 
 Oletuksena, selain valitsee ensimmäisen `<option>`-komponentin listasta. Valitaksesi eri vaihtoehdon oletuksena, välitä sen `<option>`-komponentin `value`-arvo `<select>`-komponentille `defaultValue`-propsina.
 
@@ -304,8 +304,6 @@ Oletuksena, *mikä tahansa*  `<form>`:n sisällä oleva `<button>` lähettää s
 
 Valintalista kuten `<select />` on *kontrolloimaton*. Vaikka [välittäisit aluksi valitun arvon](#providing-an-initially-selected-option) kuten `<select defaultValue="orange" />`, JSX:si määrittelee vain aluksi valitun arvon, ei arvoa juuri nyt.
 
-**To render a _controlled_ select box, pass the `value` prop to it.** React will force the select box to always have the `value` you passed. Typically, you will control a select box by declaring a [state variable:](/reference/react/useState)
-
 **Renderöidäksesi _kontrolloidun_ valintalistan, välitä sille `value`-propsi.** React pakottaa valintalistan aina sisältämään välittämäsi `value`-arvon. Tyypillisesti, ohjaat valintalistaa määrittämällä [tilamuuttujan:](/reference/react/useState)
 
 ```js {2,6,7}

From 140717103ed9067ac2e085c60a98f6332a6730b8 Mon Sep 17 00:00:00 2001
From: Miro Rauhala <4082806+mirorauhala@users.noreply.github.com>
Date: Mon, 2 Oct 2023 19:34:30 +0300
Subject: [PATCH 34/34] Translate 'Fragment'

---
 src/content/reference/react/Fragment.md | 52 ++++++++++++-------------
 1 file changed, 25 insertions(+), 27 deletions(-)

diff --git a/src/content/reference/react/Fragment.md b/src/content/reference/react/Fragment.md
index 9b9efd068..bd21d1be7 100644
--- a/src/content/reference/react/Fragment.md
+++ b/src/content/reference/react/Fragment.md
@@ -4,7 +4,7 @@ title: <Fragment> (<>...</>)
 
 <Intro>
 
-`<Fragment>`, often used via `<>...</>` syntax, lets you group elements without a wrapper node.
+`<Fragment>`, useiten käytetty `<></>` syntaksin kautta, antaa sinun ryhmitellä elementtejä ilman wrapper-elementtiä.
 
 ```js
 <>
@@ -23,25 +23,25 @@ title: <Fragment> (<>...</>)
 
 ### `<Fragment>` {/*fragment*/}
 
-Wrap elements in `<Fragment>` to group them together in situations where you need a single element. Grouping elements in `Fragment` has no effect on the resulting DOM; it is the same as if the elements were not grouped. The empty JSX tag `<></>` is shorthand for `<Fragment></Fragment>` in most cases.
+Kääri elementtejä `<Fragment>`:n sisään ryhmitelläksesi ne yhteen tilanteissa, joissa tarvitset yhden elementin. Elementtien ryhmittely `Fragment`:n sisään ei vaikuta lopulliseen DOM:iin; se on sama kuin elementtejä ei oltaisi ryhmitelty. Tyhjä JSX-tagi `<></>` on lyhenne `<Fragment></Fragment>`:sta useimmissa tapauksissa.
 
 #### Propsit {/*props*/}
 
-- **optional** `key`: Fragments declared with the explicit `<Fragment>` syntax may have [keys.](/learn/rendering-lists#keeping-list-items-in-order-with-key)
+- **valinnainen** `key`: Fragmentit jotka on määritelty `<Fragment>` syntaksilla voivat sisältää [avaimia.](/learn/rendering-lists#keeping-list-items-in-order-with-key)
 
 #### Rajoitukset {/*caveats*/}
 
-- If you want to pass `key` to a Fragment, you can't use the `<>...</>` syntax. You have to explicitly import `Fragment` from `'react'` and render `<Fragment key={yourKey}>...</Fragment>`.
+- Jos haluat välittää `key`:n Fragmentille, et voi käyttää `<></>` syntaksia. Sinun täytyy tuoda `Fragment` `'react'`-kirjastosta ja renderöidä `<Fragment key={yourKey}>...</Fragment>`.
 
-- React does not [reset state](/learn/preserving-and-resetting-state) when you go from rendering `<><Child /></>` to `[<Child />]` or back, or when you go from rendering `<><Child /></>` to `<Child />` and back. This only works a single level deep: for example, going from `<><><Child /></></>` to `<Child />` resets the state. See the precise semantics [here.](https://gist.github.com/clemmy/b3ef00f9507909429d8aa0d3ee4f986b)
+- React ei [nollaa tilaa](/learn/preserving-and-resetting-state) kun siirryt renderöimästä `<><Child /></>`:n `[<Child />]`:iin tai takaisin, tai kun siirryt renderöimästä `<><Child /></>`:n `<Child />`:iin ja takaisin. Tämä toimii vain yhden tason syvyyteen asti: esimerkiksi siirtyminen `<><><Child /></></>` `<Child />` nollaa tilan. Katso tarkat semantiikat [täältä.](https://gist.github.com/clemmy/b3ef00f9507909429d8aa0d3ee4f986b)
 
 ---
 
 ## Käyttö {/*usage*/}
 
-### Returning multiple elements {/*returning-multiple-elements*/}
+### Useiden elementtien palauttaminen {/*returning-multiple-elements*/}
 
-Use `Fragment`, or the equivalent `<>...</>` syntax, to group multiple elements together. You can use it to put multiple elements in any place where a single element can go. For example, a component can only return one element, but by using a Fragment you can group multiple elements together and then return them as a group:
+Käytä `Fragment`:ia, tai sitä vastaavaa `<></>` syntaksia, ryhmitelläksesi useita elementtejä yhteen. Voit käyttää sitä laittamaan useita elementtejä mihin tahansa paikkaan, johon yksi elementti voi mennä. Esimerkiksi komponentti voi palauttaa vain yhden elementin, mutta käyttämällä Fragmenttia voit ryhmitellä useita elementtejä yhteen ja palauttaa ne ryhmänä:
 
 ```js {3,6}
 function Post() {
@@ -54,7 +54,7 @@ function Post() {
 }
 ```
 
-Fragments are useful because grouping elements with a Fragment has no effect on layout or styles, unlike if you wrapped the elements in another container like a DOM element. If you inspect this example with the browser tools, you'll see that all `<h1>` and `<article>` DOM nodes appear as siblings without wrappers around them:
+Fragmentit ovat hyödyllisiä koska elementtien ryhmittely Fragmentin sisään ei vaikuta layouttiin tai tyyleihin, toisin kuin jos käärisit elementit toiseen DOM-elementtiin. Jos tarkastelet tätä esimerkkiä selaimen työkaluilla, näet että kaikki `<h1>` ja `<article>` DOM-nodet näkyvät sisaruksina ilman wrapper-elementtejä niiden ympärillä:
 
 <Sandpack>
 
@@ -62,8 +62,8 @@ Fragments are useful because grouping elements with a Fragment has no effect on
 export default function Blog() {
   return (
     <>
-      <Post title="An update" body="It's been a while since I posted..." />
-      <Post title="My new blog" body="I am starting a new blog!" />
+      <Post title="Päivitys" body="Siitä on hetki kun viimeksi julkaisin..." />
+      <Post title="Uusi blogini" body="Aloitan uuden blogin!" />
     </>
   )
 }
@@ -94,9 +94,9 @@ function PostBody({ body }) {
 
 <DeepDive>
 
-#### How to write a Fragment without the special syntax? {/*how-to-write-a-fragment-without-the-special-syntax*/}
+#### Miten kirjoittaa Fragment ilman erityissyntaksia? {/*how-to-write-a-fragment-without-the-special-syntax*/}
 
-The example above is equivalent to importing `Fragment` from React:
+Tämä esimerkki vastaa `Fragment`:in tuomista Reactista:
 
 ```js {1,5,8}
 import { Fragment } from 'react';
@@ -111,15 +111,14 @@ function Post() {
 }
 ```
 
-Usually you won't need this unless you need to [pass a `key` to your `Fragment`.](#rendering-a-list-of-fragments)
+Useimmiten et tule tarvitsemaan tätä ellei sinun tarvitse [välittää `key` Fragmentille.](#rendering-a-list-of-fragments)
 
 </DeepDive>
 
 ---
+### Useiden elementtien määrittäminen muuttujaan {/*assigning-multiple-elements-to-a-variable*/}
 
-### Assigning multiple elements to a variable {/*assigning-multiple-elements-to-a-variable*/}
-
-Like any other element, you can assign Fragment elements to variables, pass them as props, and so on:
+Kuten mitä tahansa muita elementtejä, voit määrittää Fragmentin elementtejä muuttujiin, välittää niitä propseina, jne:
 
 ```js
 function CloseDialog() {
@@ -131,25 +130,24 @@ function CloseDialog() {
   );
   return (
     <AlertDialog buttons={buttons}>
-      Are you sure you want to leave this page?
+      Oletko varma, että haluat poistua tältä sivulta?
     </AlertDialog>
   );
 }
 ```
 
 ---
+### Tekstin ryhmittäminen elementteihin {/*grouping-elements-with-text*/}
 
-### Grouping elements with text {/*grouping-elements-with-text*/}
-
-You can use `Fragment` to group text together with components:
+Voit käyttää `Fragment`:ia ryhmitelläksesi tekstin yhteen komponenttien kanssa:
 
 ```js
 function DateRangePicker({ start, end }) {
   return (
     <>
-      From
+      Aloituspäivä:
       <DatePicker date={start} />
-      to
+      Lopetuspäivä:
       <DatePicker date={end} />
     </>
   );
@@ -158,9 +156,9 @@ function DateRangePicker({ start, end }) {
 
 ---
 
-### Rendering a list of Fragments {/*rendering-a-list-of-fragments*/}
+### Fragment-listan renderöiminen {/*rendering-a-list-of-fragments*/}
 
-Here's a situation where you need to write `Fragment` explicitly instead of using the `<></>` syntax. When you [render multiple elements in a loop](/learn/rendering-lists), you need to assign a `key` to each element. If the elements within the loop are Fragments, you need to use the normal JSX element syntax in order to provide the `key` attribute:
+Tässä on tilanne, jossa sinun täytyy kirjoittaa `Fragment` eksplisiittisesti sen sijaan, että käyttäisit `<></>` syntaksia. Kun [renderöit useita elementtejä silmukassa](/learn/rendering-lists), sinun täytyy määrittää `key` jokaiselle elementille. Jos elementit silmukan sisällä ovat Fragmentteja, sinun täytyy käyttää normaalia JSX-elementti -syntaksia, jotta voit välittää `key` attribuutin:
 
 ```js {3,6}
 function Blog() {
@@ -173,7 +171,7 @@ function Blog() {
 }
 ```
 
-You can inspect the DOM to verify that there are no wrapper elements around the Fragment children:
+Voit tarkastella DOM:ia varmistaaksesi, että Fragmentin lapsilla ei ole wrapper-elementtejä:
 
 <Sandpack>
 
@@ -181,8 +179,8 @@ You can inspect the DOM to verify that there are no wrapper elements around the
 import { Fragment } from 'react';
 
 const posts = [
-  { id: 1, title: 'An update', body: "It's been a while since I posted..." },
-  { id: 2, title: 'My new blog', body: 'I am starting a new blog!' }
+  { id: 1, title: 'Päivitys', body: "Siitä on hetki kun viimeksi julkaisin..." },
+  { id: 2, title: 'Uusi blogini', body: 'Aloitan uuden blogin!' }
 ];
 
 export default function Blog() {