diff --git a/content/docs/lifting-state-up.md b/content/docs/lifting-state-up.md
index 449330cfd..ad5046aa8 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: הרמת ה-State למעלה
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.
+לעתים קרובות, מספר קומפוננטות צריכות לשקף את אותם נתונים משתנים. אנו ממליצים להרים את ה-state המשותף עד לאב הקדמון הקרוב ביותר. בואו נראה איך זה עובד.
-In this section, we will create a temperature calculator that calculates whether the water would boil at a given temperature.
+בחלק זה, ניצור מחשבון טמפרטורה המחשב אם המים ירתחו בטמפרטורה נתונה.
-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:
+נתחיל עם קומפוננטה שנקראת `BoilingVerdict`. היא מקבלת את הטמפרטורה ב-`celsius` בתור props, ומדפיסה אם הטמפרטורה מספיקה כדי להרתיח את המים:
```js{3,5}
function BoilingVerdict(props) {
if (props.celsius >= 100) {
- return The water would boil.
;
+ return המים ירתחו.
;
}
- return The water would not boil.
;
+ return המים לא ירתחו.
;
}
```
-Next, we will create a component called `Calculator`. It renders an `
- Enter temperature in Celsius:
+ הכנס טמפרטורה בצלזיוס:
- Enter temperature in {scaleNames[scale]}:
+ הכנס טמפרטורה ב{scaleNames[scale]}:
@@ -95,7 +95,7 @@ class TemperatureInput extends React.Component {
}
```
-We can now change the `Calculator` to render two separate temperature inputs:
+כעת אנו יכולים לשנות את `Calculator` כדי שירנדר שתי קלטי טמפרטורה נפרדים:
```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)
+[**נסו זאת ב-CodePen**](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.
+יש לנו שני קלטים עכשיו, אבל כאשר אתם מכניסים את הטמפרטורה באחד מהם, השני אינו מתעדכן. זה סותר את הדרישה שלנו: אנחנו רוצים לשמור אותם מסונכרנים.
-We also can't display the `BoilingVerdict` from `Calculator`. The `Calculator` doesn't know the current temperature because it is hidden inside the `TemperatureInput`.
+אנחנו גם לא יכולים להציג את `BoilingVerdict` מ-`Calculator`. ה-`Calculator` אינו יודע את הטמפרטורה הנוכחית משום שהיא מוסתרת בתוך ה-`TemperatureInput`.
-## Writing Conversion Functions {#writing-conversion-functions}
+## כתיבת פונקציית המרה {#writing-conversion-functions}
-First, we will write two functions to convert from Celsius to Fahrenheit and back:
+ראשית, נכתוב שתי פונקציות כדי להמיר מצלזיוס לפרנהייט ובחזרה:
```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.
+שתי הפונקציות ממירות מספרים. נכתוב פונקציה אחרת שלוקחת מחרוזת `temperature` ופונקציית המרה כארגומנטים ומחזירה מחרוזת. נשתמש בה כדי לחשב את הערך של קלט אחד על סמך קלט אחר.
-It returns an empty string on an invalid `temperature`, and it keeps the output rounded to the third decimal place:
+היא מחזירה מחרוזת ריקה עבור טמפרטורה (`temperature`) לא חוקית, והיא שומרת את הפלט מעוגל לספרה העשרונית השלישית לאחר הנקודה:
```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'`.
+לדוגמה, `tryConvert('abc', toCelsius)` מחזיר מחרוזת ריקה, ו-`tryConvert('10.22', toFahrenheit)` מחזיר `'50.396'`.
-## Lifting State Up {#lifting-state-up}
+## הרמת ה-State למעלה {#lifting-state-up}
-Currently, both `TemperatureInput` components independently keep their values in the local state:
+כרגע, שני קומפוננטות ה-`TemperatureInput` מחזיקות את הערך שלהן באופן עצמאי ב-state מקומי:
```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.
+למרות זאת, אנחנו רוצים ששני הקלטים האלו יהיו מסונכרנים אחד עם השני. כאשר אנו מעדכנים את קלט צלזיוס, קלט פרנהייט צריך לשקף את הטמפרטורה המומרת, ואותו דבר בכיוון השני.
-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.
+ב-React, שיתוף ה-state נעשה על ידי העברתו אל האב הקדמון המשותף הקרוב ביותר של הקומפוננטות הזקוקות לו. זה נקרא "הרמת ה-state למעלה". אנו נסיר את ה-state המקומי מ-`TemperatureInput` ולנעביר אותו לתוך `Calculator` במקום.
-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.
+אם `Calculator` הוא הבעלים של ה-state המשותף, הוא הופך להיות "מקור האמת" ("source of truth") לטמפרטורה הנוכחית בשני הקלטים. זה יכול להנחות את שניהם להשתמש בערכים כך שיהיו עקביים אחד עם השני. מכיוון שה-props של שתי קומפוננטות `TemperatureInput` מגיעים מאותה קומפוננטת אב `Calculator`, שני הקלטים יהיו תמיד מסונכרנים.
-Let's see how this works step by step.
+בואו נראה איך זה עובד צעד אחר צעד.
-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:
+ראשית, אנו מחליפים את `this.state.temperature` עם `this.props.temperature` בקומפוננטת `TemperatureInput`. לעת עתה, בואו נמשיך להעמיד פנים ש`this.props.temperature` כבר קיים, למרות שנצטרך להעביר אותו מ-`Calculator` בעתיד:
```js{3}
render() {
- // Before: const temperature = this.state.temperature;
+ // קודם לכן: 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.
+אנחנו יודעים ש-[props הם לקריאה בלבד](/docs/components-and-props.html#props-are-read-only). כאשר ה-`temperature` היה ב-state המקומי, ה-`TemperatureInput` יכל פשוט לקרוא ל-`this.setState()` כדי לשנות אותו. למרות זאת, עכשיו כאשר `temperature` מגיע מההורה בתור prop, ל-`TemperatureInput` אין שליטה עליו.
-In React, this is usually solved by making a component "controlled". Just like the DOM `
- Enter temperature in {scaleNames[scale]}:
+ הכנס טמפרטורה ב{scaleNames[scale]}:
@@ -232,11 +232,11 @@ class TemperatureInput extends React.Component {
}
```
-Now let's turn to the `Calculator` component.
+עכשיו בואו נפנה לקומפוננטת `Calculator`.
-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.
+אנו נשמור את הקלטים הנוכחיים `temperature` ו-`scale` ב-state המקומי שלה. זהו ה-state ש-"הרמנו" מהקלטים, והוא ישמש "מקור האמת" עבור שניהם. זהו ייצוג מינימלי של כל הנתונים שאנחנו צריכים לדעת על מנת לרנדר את שני הקלטים.
-For example, if we enter 37 into the Celsius input, the state of the `Calculator` component will be:
+לדוגמה, אם נכניס 37 לתוך הקלט של צלזיוס, ה-state של קומפוננטת `Calculator` יהיה:
```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:
+אם מאוחר יותר נערוך את השדה פרנהייט כך שיהיה 212, ה-state של `Calculator` יהיה:
```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.
+היינו יכולים לאחסן את הערך של שני הקלטים אבל מסתבר שזה יהיה מיותר. זה מספיק לאחסן את הערך של הקלט האחרון שהשתנה, ואת המדד שהוא מייצג. לאחר מכן אנו יכולים להסיק את הערך של הקלט האחר בהתבסס על ערכי `temperature` ו-`scale` הנוכחיים בלבד.
-The inputs stay in sync because their values are computed from the same state:
+הקלטים נשארים מסונכרנים מכיוון שהערכים שלהם מחושבים מאותו state:
```js{6,10,14,18-21,27-28,31-32,34}
class Calculator extends React.Component {
@@ -299,32 +299,32 @@ class Calculator extends React.Component {
}
```
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/WZpxpz?editors=0010)
+[**נסו זאת ב-CodePen**](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.
+עכשיו, לא משנה איזה קלט אתם עורכים, `this.state.temperature` ו-`this.state.scale` ב-`Calculator` מתעדכנים. אחד הקלטים מקבל את הערך כפי שהוא, ולכן כל קלט משתמש נשמר, וערך הקלט האחר תמיד מחושב מחדש על בסיס הערך.
-Let's recap what happens when you edit an input:
+בואו נסכם את מה שקורה בעת עריכת קלט:
-* React calls the function specified as `onChange` on the DOM `