diff --git a/content/docs/fragments.md b/content/docs/fragments.md
index 33619db2f..227af6ce5 100644
--- a/content/docs/fragments.md
+++ b/content/docs/fragments.md
@@ -1,10 +1,10 @@
---
id: fragments
-title: Fragments
+title: Töredékek
permalink: docs/fragments.html
---
-A common pattern in React is for a component to return multiple elements. Fragments let you group a list of children without adding extra nodes to the DOM.
+Egy általános minta a React-ben, hogy egy komponens több elemet ad vissza. A töredékek segítenek gyermekek listáját csoportosítani anélkül, hogy új csomópontot adnál a DOM-hoz.
```js
render() {
@@ -18,11 +18,11 @@ render() {
}
```
-There is also a new [short syntax](#short-syntax) for declaring them.
+Létezik egy új [rövid szintaxis](#short-syntax) is a deklarálásukhoz.
-## Motivation {#motivation}
+## Motiváció {#motivation}
-A common pattern is for a component to return a list of children. Take this example React snippet:
+Komponensek esetében gyakori minta, hogy az gyermekek listájával térjen vissza. Vegyük példának ezt a React kódrészletet:
```jsx
class Table extends React.Component {
@@ -38,91 +38,91 @@ class Table extends React.Component {
}
```
-`` would need to return multiple `
` elements in order for the rendered HTML to be valid. If a parent div was used inside the `render()` of ``, then the resulting HTML will be invalid.
+A ``-nak több ` | ` elemet kell visszaadnia hogy a megjelenített HTML érvényes legyen. Ha egy szülő div-et használunk a `` komponens `render()` metódusában, akkor az eredményül kapott HTML érvénytelen lesz.
```jsx
class Columns extends React.Component {
render() {
return (
- | Hello |
- World |
+ Helló |
+ Világ |
);
}
}
```
-results in a `` output of:
+a következő `` kimenetet eredményezi:
```jsx
-
Hello |
- World |
+ Helló |
+ Világ |
```
-Fragments solve this problem.
+A töredékek ezt a problémát oldják meg.
-## Usage {#usage}
+## Használat {#usage}
```jsx{4,7}
class Columns extends React.Component {
render() {
return (
- Hello |
- World |
+ Helló |
+ Világ |
);
}
}
```
-which results in a correct `` output of:
+ami a következő helyes `` kimenetet eredményezi:
```jsx
- Hello |
- World |
+ Helló |
+ Világ |
```
-### Short Syntax {#short-syntax}
+### Rövid szintaxis {#short-syntax}
-There is a new, shorter syntax you can use for declaring fragments. It looks like empty tags:
+Van egy új, rövidebb szintaxis, amit a töredékek deklarálásához használhatsz. Úgy néz ki, mint az üres címkék:
```jsx{4,7}
class Columns extends React.Component {
render() {
return (
<>
- Hello |
- World |
+ Helló |
+ Világ |
>
);
}
}
```
-You can use `<>>` the same way you'd use any other element except that it doesn't support keys or attributes.
+Ugyanúgy használhatod a `<>>`-t, mint ahogy más elemeket is, azzal a különbséggel, hogy ez nem támogatja a kulcsokat és az attribútumokat.
-### Keyed Fragments {#keyed-fragments}
+### Kulcsot használó töredékek {#keyed-fragments}
-Fragments declared with the explicit `` syntax may have keys. A use case for this is mapping a collection to an array of fragments -- for example, to create a description list:
+A töredékek, amik a `` szintaxissal vannak deklarálva tartalmazhatnak kulcsokat. Ennek az egyik felhasználási módja egy kollekció leképezése töredékek tömbre -- például egy leíráslista létrehozására:
```jsx
function Glossary(props) {
return (
{props.items.map(item => (
- // Without the `key`, React will fire a key warning
+ // 'key' nélkül a React figyelmeztetést fog dobni
- {item.term}
- {item.description}
@@ -133,8 +133,8 @@ function Glossary(props) {
}
```
-`key` is the only attribute that can be passed to `Fragment`. In the future, we may add support for additional attributes, such as event handlers.
+A `key` az egyetlen olyan attribútum, amelyet át lehet adni egy `Fragment`-nek. A jövőben további attribútumok, például eseménykezelők is támogatást kaphatnak.
-### Live Demo {#live-demo}
+### Élő demó {#live-demo}
-You can try out the new JSX fragment syntax with this [CodePen](https://codepen.io/reactjs/pen/VrEbjE?editors=1000).
+Ebben a [CodePen](https://codepen.io/reactjs/pen/VrEbjE?editors=1000)-ben kipróbálhatod az új JSX töredék szintaxist.