diff --git a/content/docs/lifting-state-up.md b/content/docs/lifting-state-up.md
index c01c5eab2..156df7364 100644
--- a/content/docs/lifting-state-up.md
+++ b/content/docs/lifting-state-up.md
@@ -1,6 +1,6 @@
---
id: lifting-state-up
-title: Lifting State Up
+title: Állapot felemelése
permalink: docs/lifting-state-up.html
prev: forms.html
next: composition-vs-inheritance.html
@@ -9,24 +9,24 @@ redirect_from:
- "docs/flux-todo-list.html"
---
-Often, several components need to reflect the same changing data. We recommend lifting the shared state up to their closest common ancestor. Let's see how this works in action.
+Gyakran több komponens kell, hogy ugyanazon adat változását tükrözze. Ebben az esetben a megosztott állapot legközelebbi közös ősbe való felemelését ajánljuk. Lássuk, hogy hogyan is működik ez a gyakorlatban.
-In this section, we will create a temperature calculator that calculates whether the water would boil at a given temperature.
+Ebben a fejezetben egy hőmérsékletkalkulátort fogunk készíteni, ami azt számolja ki, hogy a víz forr-e egy adott hőmérsékleten.
-We will start with a component called `BoilingVerdict`. It accepts the `celsius` temperature as a prop, and prints whether it is enough to boil the water:
+Kezdjük egy `BoilingVerdict` komponenssel. Ez egy `celsius` prop-ot fogad, és kiírja, hogy ez elég-e a víz forrásához:
```js{3,5}
function BoilingVerdict(props) {
if (props.celsius >= 100) {
- return The water would boil.
;
+ return A víz forrna.
;
}
- return The water would not boil.
;
+ return A víz nem forrna.
;
}
```
-Next, we will create a component called `Calculator`. It renders an `
- Enter temperature in Celsius:
+ Adja meg a hőmérsékletet Celsius egységben:
- Enter temperature in {scaleNames[scale]}:
+ Adja meg a hőmérsékletet {scaleNames[scale]} egységben:
@@ -95,7 +95,7 @@ class TemperatureInput extends React.Component {
}
```
-We can now change the `Calculator` to render two separate temperature inputs:
+Így most meg tudjuk változtatni a `Calculator` komponenst, hogy az két külön hőmérséklet inputot rendereljen:
```js{5,6}
class Calculator extends React.Component {
@@ -110,15 +110,15 @@ class Calculator extends React.Component {
}
```
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/jGBryx?editors=0010)
+[**Próbáld ki CodePen-en**](https://codepen.io/gaearon/pen/jGBryx?editors=0010)
-We have two inputs now, but when you enter the temperature in one of them, the other doesn't update. This contradicts our requirement: we want to keep them in sync.
+Most már két beviteli mezőnk van, de ha az egyikbe beírod a hőmérsékletet, a másik nem frissül. Ez ellentmond a követelményünknek: az értékek legyenek szinkronban.
-We also can't display the `BoilingVerdict` from `Calculator`. The `Calculator` doesn't know the current temperature because it is hidden inside the `TemperatureInput`.
+Valamint a `BoilingVerdict`-et sem tudjuk megjeleníteni a `Calculator`-ból. A `Calculator` nem ismeri a jelenlegi hőmérsékletet, mert az el van rejtve a `TemperatureInput`-ban.
-## Writing Conversion Functions {#writing-conversion-functions}
+## Konvertáló függvények írása {#writing-conversion-functions}
-First, we will write two functions to convert from Celsius to Fahrenheit and back:
+Először írjunk két függvényt ami a Celsius-t konvertálja Fahrenheit-té és vissza:
```js
function toCelsius(fahrenheit) {
@@ -130,9 +130,9 @@ function toFahrenheit(celsius) {
}
```
-These two functions convert numbers. We will write another function that takes a string `temperature` and a converter function as arguments and returns a string. We will use it to calculate the value of one input based on the other input.
+Ez a két függvény számokat konvertál. Írunk egy harmadik függvényt, ami vesz egy `temperature` sztringet és egy konvertáló függvényt argumentumként, és egy sztringet ad vissza. Ezt arra használjuk majd, hogy az egyik input értékét a másik értékének alapján ki tudjuk számolni.
-It returns an empty string on an invalid `temperature`, and it keeps the output rounded to the third decimal place:
+Érvénytelen `temperature` esetében a függvény egy üres sztringet ad vissza, valamint az értéket három tizedesjegyre kerekíti:
```js
function tryConvert(temperature, convert) {
@@ -146,11 +146,11 @@ function tryConvert(temperature, convert) {
}
```
-For example, `tryConvert('abc', toCelsius)` returns an empty string, and `tryConvert('10.22', toFahrenheit)` returns `'50.396'`.
+A `tryConvert('abc', toCelsius)` például egy üres sztringet ad vissza, a `tryConvert('10.22', toFahrenheit)` pedig `'50.396'`-t.
-## Lifting State Up {#lifting-state-up}
+## Állapot felemelése {#lifting-state-up}
-Currently, both `TemperatureInput` components independently keep their values in the local state:
+Jelenleg mindkét `TemperatureInput` komponens egymástól függetlenül tárolja a saját helyi állapotát:
```js{5,9,13}
class TemperatureInput extends React.Component {
@@ -169,43 +169,43 @@ class TemperatureInput extends React.Component {
// ...
```
-However, we want these two inputs to be in sync with each other. When we update the Celsius input, the Fahrenheit input should reflect the converted temperature, and vice versa.
+Mi azonban azt szeretnénk, ha a két input szinkronban lenne egymással. Ha frissítjük a Celsius inputot, a Fahrenheit-nek tükröznie kell a konvertált hőmérsékletet, és oda-vissza.
-In React, sharing state is accomplished by moving it up to the closest common ancestor of the components that need it. This is called "lifting state up". We will remove the local state from the `TemperatureInput` and move it into the `Calculator` instead.
+A React-ben az állapot megosztása azon komponensek között, amelyek ezt igénylik, úgy történik, hogy az állapotot azok legközelebbi közös ősébe mozgatjuk. Ezt hívjuk az "állapot felemelésének". A `TemperatureInput` helyi állapotát eltávolítjuk és a `Calculator`-ba költöztetjük azt.
-If the `Calculator` owns the shared state, it becomes the "source of truth" for the current temperature in both inputs. It can instruct them both to have values that are consistent with each other. Since the props of both `TemperatureInput` components are coming from the same parent `Calculator` component, the two inputs will always be in sync.
+Ha a `Calculator` birtokolja a megosztott állapotot, ezzel a jelenlegi hőmérséklet "igazságának forrásává" válik mindkét input számára. Mindkét inputot utasítani tudja, hogy olyan értéket vegyenek fel, ami konzisztens a másikkal. Mivel mindkét `TemperatureInput` komponens prop-jai ugyanabból a szülő `Calculator` komponensből jönnek, a két input így mindig szinkronban lesz.
-Let's see how this works step by step.
+Lássuk lépésről-lépésre, hogyan is működik ez.
-First, we will replace `this.state.temperature` with `this.props.temperature` in the `TemperatureInput` component. For now, let's pretend `this.props.temperature` already exists, although we will need to pass it from the `Calculator` in the future:
+Először is, cseréljük le a `this.state.temperature`-t `this.props.temperature`-ra a `TemperatureInput` komponensben. Átmenetileg tegyük fel, hogy a `this.props.temperature` létezik, bár később le kell azt küldjük a `Calculator`-ból:
```js{3}
render() {
- // Before: const temperature = this.state.temperature;
+ // Előtte: const temperature = this.state.temperature;
const temperature = this.props.temperature;
// ...
```
-We know that [props are read-only](/docs/components-and-props.html#props-are-read-only). When the `temperature` was in the local state, the `TemperatureInput` could just call `this.setState()` to change it. However, now that the `temperature` is coming from the parent as a prop, the `TemperatureInput` has no control over it.
+Azt tudjuk, hogy a [prop-ok csak olvashatóak](/docs/components-and-props.html#props-are-read-only). Mikor a `temperature` a helyi állapotban volt, a `TemperatureInput` csak egyszerűen meg tudta hívni a `this.setState()`-t annak megváltoztatásához. Azzal hogy a `temperature` most prop-ként jön a szülő komponensből, a `TemperatureInput` elvesztette az irányítást felette.
-In React, this is usually solved by making a component "controlled". Just like the DOM `
- Enter temperature in {scaleNames[scale]}:
+ Adja meg a hőmérsékletet {scaleNames[scale]} egységben:
@@ -232,11 +232,11 @@ class TemperatureInput extends React.Component {
}
```
-Now let's turn to the `Calculator` component.
+Most pedig forduljunk a `Calculator` komponens felé.
-We will store the current input's `temperature` and `scale` in its local state. This is the state we "lifted up" from the inputs, and it will serve as the "source of truth" for both of them. It is the minimal representation of all the data we need to know in order to render both inputs.
+A jelenlegi inputot a `temperature` és `scale` helyi állapotban fogjuk tárolni. Ez a beviteli mezőkből "felemelt" állapot és ez fog az "igazság forrásaként" szolgálni mindkettő számára. Ez az összes adat minimális reprezentációja, amit ismernünk kell ahhoz, hogy mindkét inputot renderelni tudjuk.
-For example, if we enter 37 into the Celsius input, the state of the `Calculator` component will be:
+Például ha 37-et írunk be a Celsius beviteli mezőbe, a `Calculator` komponens állapota így fog kinézni:
```js
{
@@ -245,7 +245,7 @@ For example, if we enter 37 into the Celsius input, the state of the `Calculator
}
```
-If we later edit the Fahrenheit field to be 212, the state of the `Calculator` will be:
+Ha később a Fahrenheit mezőbe írunk 212-t, a `Calculator` állapota így fog kinézni:
```js
{
@@ -254,9 +254,9 @@ If we later edit the Fahrenheit field to be 212, the state of the `Calculator` w
}
```
-We could have stored the value of both inputs but it turns out to be unnecessary. It is enough to store the value of the most recently changed input, and the scale that it represents. We can then infer the value of the other input based on the current `temperature` and `scale` alone.
+Eltárolhattuk volna mindkét input értékét is, de ez valószínűleg felesleges. Elég, ha csak a legutoljára változott input értéket és annak mértékegységét tároljuk. Ezután a jelenlegi `temperature` és `scale` értékekből egyszerűen ki tudjuk következtetni a másik input értékét is.
-The inputs stay in sync because their values are computed from the same state:
+Az inputok szinkronizálva lesznek, mivel azok értékei ugyanabból az állapotból vannak kalkulálva:
```js{6,10,14,18-21,27-28,31-32,34}
class Calculator extends React.Component {
@@ -299,32 +299,31 @@ class Calculator extends React.Component {
}
```
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/WZpxpz?editors=0010)
+[**Próbáld ki CodePen-en**](https://codepen.io/gaearon/pen/WZpxpz?editors=0010)
-Now, no matter which input you edit, `this.state.temperature` and `this.state.scale` in the `Calculator` get updated. One of the inputs gets the value as is, so any user input is preserved, and the other input value is always recalculated based on it.
+Így, ha most bármelyik inputot is szerkesztjük, a `this.state.temperature` és a `this.state.scale` frissülni fog a `Calculator`-ban. Az egyik input úgy kapja meg az értéket, ahogy az el van tárolva, szóval bármilyen felhasználói input meg van őrizve, míg a másik input mindig ez alapján lesz újrakalkulálva.
-Let's recap what happens when you edit an input:
+Vegyük át mi történik, mikor egy inputot szerkesztesz:
-* React calls the function specified as `onChange` on the DOM `