` container. For example, let's say the parent component passes three `
` tags as the `children` prop to `RowList`:
+Nell'esempio sopra, `RowList` avvolge ogni child che riceve in un contenitore `
`. Ad esempio, supponiamo che il componente genitore passi tre tag `
` come prop `children` a `RowList`:
```js
@@ -224,7 +231,7 @@ In the example above, the `RowList` wraps every child it receives into a `
```
-Then, with the `RowList` implementation above, the final rendered result will look like this:
+Poi, con l'implementazione di `RowList` sopra, il risultato finale renderizzato sarà simile a questo:
```js
@@ -240,7 +247,7 @@ Then, with the `RowList` implementation above, the final rendered result will lo
```
-`Children.map` is similar to [to transforming arrays with `map()`.](/learn/rendering-lists) The difference is that the `children` data structure is considered *opaque.* This means that even if it's sometimes an array, you should not assume it's an array or any other particular data type. This is why you should use `Children.map` if you need to transform it.
+`Children.map` è simile a [trasformare array con `map()`.](/learn/rendering-lists) La differenza è che la struttura dati `children` è considerata *opaca.* Ciò significa che, anche se a volte è un array, non dovresti assumere che lo sia o che abbia un altro tipo di dato particolare. Per questo motivo, se devi trasformarla, dovresti usare `Children.map`.
@@ -293,24 +300,24 @@ export default function RowList({ children }) {
-#### Why is the children prop not always an array? {/*why-is-the-children-prop-not-always-an-array*/}
+#### Perché la prop `children` non è sempre un array? {/*why-is-the-children-prop-not-always-an-array*/}
-In React, the `children` prop is considered an *opaque* data structure. This means that you shouldn't rely on how it is structured. To transform, filter, or count children, you should use the `Children` methods.
+In React, la prop `children` è considerata una struttura dati *opaca*. Ciò significa che non dovresti fare affidamento su come è strutturata. Per trasformare, filtrare o contare i children, dovresti usare i metodi `Children`.
-In practice, the `children` data structure is often represented as an array internally. However, if there is only a single child, then React won't create an extra array since this would lead to unnecessary memory overhead. As long as you use the `Children` methods instead of directly introspecting the `children` prop, your code will not break even if React changes how the data structure is actually implemented.
+In pratica, la struttura dati `children` è spesso rappresentata internamente come un array. Tuttavia, se c'è un solo child, React non creerà un array aggiuntivo perché ciò porterebbe a un overhead di memoria non necessario. Finché usi i metodi `Children` invece di ispezionare direttamente la prop `children`, il tuo codice non si romperà anche se React cambia il modo in cui la struttura dati è effettivamente implementata.
-Even when `children` is an array, `Children.map` has useful special behavior. For example, `Children.map` combines the [keys](/learn/rendering-lists#keeping-list-items-in-order-with-key) on the returned elements with the keys on the `children` you've passed to it. This ensures the original JSX children don't "lose" keys even if they get wrapped like in the example above.
+Anche quando `children` è un array, `Children.map` ha un comportamento speciale utile. Ad esempio, `Children.map` combina le [key](/learn/rendering-lists#keeping-list-items-in-order-with-key) sugli elementi restituiti con le key sui `children` che gli hai passato. Questo garantisce che i children JSX originali non "perdano" le key anche se vengono avvolti come nell'esempio sopra.
-The `children` data structure **does not include rendered output** of the components you pass as JSX. In the example below, the `children` received by the `RowList` only contains two items rather than three:
+La struttura dati `children` **non include l'output renderizzato** dei componenti che passi come JSX. Nell'esempio sotto, i `children` ricevuti da `RowList` contengono solo due elementi anziché tre:
1. `This is the first item.
`
2. ``
-This is why only two row wrappers are generated in this example:
+Per questo motivo in questo esempio vengono generati solo due wrapper di riga:
@@ -369,15 +376,15 @@ export default function RowList({ children }) {
-**There is no way to get the rendered output of an inner component** like `` when manipulating `children`. This is why [it's usually better to use one of the alternative solutions.](#alternatives)
+**Non c'è modo di ottenere l'output renderizzato di un componente interno** come `` quando manipoli `children`. Per questo motivo [di solito è meglio usare una delle soluzioni alternative.](#alternatives)
---
-### Running some code for each child {/*running-some-code-for-each-child*/}
+### Eseguire del codice per ogni child {/*running-some-code-for-each-child*/}
-Call `Children.forEach` to iterate over each child in the `children` data structure. It does not return any value and is similar to the [array `forEach` method.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) You can use it to run custom logic like constructing your own array.
+Chiama `Children.forEach` per iterare su ogni child nella struttura dati `children`. Non restituisce alcun valore ed è simile al [metodo `forEach` degli array.](https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) Puoi usarlo per eseguire logica personalizzata, come costruire il tuo array.
@@ -413,15 +420,15 @@ export default function SeparatorList({ children }) {
-As mentioned earlier, there is no way to get the rendered output of an inner component when manipulating `children`. This is why [it's usually better to use one of the alternative solutions.](#alternatives)
+Come accennato in precedenza, non c'è modo di ottenere l'output renderizzato di un componente interno quando manipoli `children`. Per questo motivo [di solito è meglio usare una delle soluzioni alternative.](#alternatives)
---
-### Counting children {/*counting-children*/}
+### Contare i children {/*counting-children*/}
-Call `Children.count(children)` to calculate the number of children.
+Chiama `Children.count(children)` per calcolare il numero di children.
@@ -484,15 +491,15 @@ export default function RowList({ children }) {
-As mentioned earlier, there is no way to get the rendered output of an inner component when manipulating `children`. This is why [it's usually better to use one of the alternative solutions.](#alternatives)
+Come accennato in precedenza, non c'è modo di ottenere l'output renderizzato di un componente interno quando manipoli `children`. Per questo motivo [di solito è meglio usare una delle soluzioni alternative.](#alternatives)
---
-### Converting children to an array {/*converting-children-to-an-array*/}
+### Convertire i children in un array {/*converting-children-to-an-array*/}
-Call `Children.toArray(children)` to turn the `children` data structure into a regular JavaScript array. This lets you manipulate the array with built-in array methods like [`filter`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter), [`sort`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort), or [`reverse`.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse)
+Chiama `Children.toArray(children)` per trasformare la struttura dati `children` in un normale array JavaScript. Questo ti permette di manipolare l'array con i metodi array integrati come [`filter`](https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Global_Objects/Array/filter), [`sort`](https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) o [`reverse`.](https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse)
@@ -524,7 +531,7 @@ export default function ReversedList({ children }) {
-As mentioned earlier, there is no way to get the rendered output of an inner component when manipulating `children`. This is why [it's usually better to use one of the alternative solutions.](#alternatives)
+Come accennato in precedenza, non c'è modo di ottenere l'output renderizzato di un componente interno quando manipoli `children`. Per questo motivo [di solito è meglio usare una delle soluzioni alternative.](#alternatives)
@@ -534,21 +541,21 @@ As mentioned earlier, there is no way to get the rendered output of an inner com
-This section describes alternatives to the `Children` API (with capital `C`) that's imported like this:
+Questa sezione descrive alternative all'API `Children` (con la `C` maiuscola) che si importa così:
```js
import { Children } from 'react';
```
-Don't confuse it with [using the `children` prop](/learn/passing-props-to-a-component#passing-jsx-as-children) (lowercase `c`), which is good and encouraged.
+Non confonderla con [l'uso della prop `children`](/learn/passing-props-to-a-component#passing-jsx-as-children) (con la `c` minuscola), che è buona pratica ed è incoraggiato.
-### Exposing multiple components {/*exposing-multiple-components*/}
+### Esporre più componenti {/*exposing-multiple-components*/}
-Manipulating children with the `Children` methods often leads to fragile code. When you pass children to a component in JSX, you don't usually expect the component to manipulate or transform the individual children.
+Manipolare i children con i metodi `Children` spesso porta a codice fragile. Quando passi children a un componente in JSX, di solito non ti aspetti che il componente manipoli o trasformi i singoli children.
-When you can, try to avoid using the `Children` methods. For example, if you want every child of `RowList` to be wrapped in ``, export a `Row` component, and manually wrap every row into it like this:
+Quando puoi, cerca di evitare l'uso dei metodi `Children`. Ad esempio, se vuoi che ogni child di `RowList` sia avvolto in `
`, esporta un componente `Row` e avvolgi manualmente ogni riga così:
@@ -607,7 +614,7 @@ export function Row({ children }) {
-Unlike using `Children.map`, this approach does not wrap every child automatically. **However, this approach has a significant benefit compared to the [earlier example with `Children.map`](#transforming-children) because it works even if you keep extracting more components.** For example, it still works if you extract your own `MoreRows` component:
+A differenza dell'uso di `Children.map`, questo approccio non avvolge automaticamente ogni child. **Tuttavia, questo approccio ha un vantaggio significativo rispetto al [precedente esempio con `Children.map`](#transforming-children) perché funziona anche se continui a estrarre altri componenti.** Ad esempio, funziona ancora se estrai il tuo componente `MoreRows`:
@@ -674,13 +681,13 @@ export function Row({ children }) {
-This wouldn't work with `Children.map` because it would "see" `
` as a single child (and a single row).
+Questo non funzionerebbe con `Children.map` perché "vedrebbe" `
` come un singolo child (e una singola riga).
---
-### Accepting an array of objects as a prop {/*accepting-an-array-of-objects-as-a-prop*/}
+### Accettare un array di oggetti come prop {/*accepting-an-array-of-objects-as-a-prop*/}
-You can also explicitly pass an array as a prop. For example, this `RowList` accepts a `rows` array as a prop:
+Puoi anche passare esplicitamente un array come prop. Ad esempio, questo `RowList` accetta un array `rows` come prop:
@@ -729,9 +736,9 @@ export function RowList({ rows }) {
-Since `rows` is a regular JavaScript array, the `RowList` component can use built-in array methods like [`map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) on it.
+Poiché `rows` è un normale array JavaScript, il componente `RowList` può usare metodi array integrati come [`map`](https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Global_Objects/Array/map) su di esso.
-This pattern is especially useful when you want to be able to pass more information as structured data together with children. In the below example, the `TabSwitcher` component receives an array of objects as the `tabs` prop:
+Questo pattern è particolarmente utile quando vuoi poter passare più informazioni come dati strutturati insieme ai children. Nell'esempio sotto, il componente `TabSwitcher` riceve un array di oggetti come prop `tabs`:
@@ -789,13 +796,13 @@ export default function TabSwitcher({ tabs }) {
-Unlike passing the children as JSX, this approach lets you associate some extra data like `header` with each item. Because you are working with the `tabs` directly, and it is an array, you do not need the `Children` methods.
+A differenza del passaggio dei children come JSX, questo approccio ti permette di associare alcuni dati extra come `header` a ogni elemento. Poiché lavori direttamente con `tabs`, ed è un array, non hai bisogno dei metodi `Children`.
---
-### Calling a render prop to customize rendering {/*calling-a-render-prop-to-customize-rendering*/}
+### Chiamare una render prop per personalizzare la renderizzazione {/*calling-a-render-prop-to-customize-rendering*/}
-Instead of producing JSX for every single item, you can also pass a function that returns JSX, and call that function when necessary. In this example, the `App` component passes a `renderContent` function to the `TabSwitcher` component. The `TabSwitcher` component calls `renderContent` only for the selected tab:
+Invece di produrre JSX per ogni singolo elemento, puoi anche passare una funzione che restituisce JSX e chiamarla quando necessario. In questo esempio, il componente `App` passa una funzione `renderContent` al componente `TabSwitcher`. Il componente `TabSwitcher` chiama `renderContent` solo per la tab selezionata:
@@ -844,9 +851,9 @@ export default function TabSwitcher({ tabIds, getHeader, renderContent }) {
-A prop like `renderContent` is called a *render prop* because it is a prop that specifies how to render a piece of the user interface. However, there is nothing special about it: it is a regular prop which happens to be a function.
+Una prop come `renderContent` si chiama *render prop* perché è una prop che specifica come renderizzare un pezzo dell'interfaccia utente. Tuttavia, non c'è nulla di speciale: è una prop normale che per caso è una funzione.
-Render props are functions, so you can pass information to them. For example, this `RowList` component passes the `id` and the `index` of each row to the `renderRow` render prop, which uses `index` to highlight even rows:
+Le render props sono funzioni, quindi puoi passare loro informazioni. Ad esempio, questo componente `RowList` passa l'`id` e l'`index` di ogni riga alla render prop `renderRow`, che usa `index` per evidenziare le righe pari:
@@ -927,15 +934,15 @@ export function Row({ children, isHighlighted }) {
-This is another example of how parent and child components can cooperate without manipulating the children.
+Questo è un altro esempio di come componenti genitore e figlio possono cooperare senza manipolare i children.
---
## Troubleshooting {/*troubleshooting*/}
-### I pass a custom component, but the `Children` methods don't show its render result {/*i-pass-a-custom-component-but-the-children-methods-dont-show-its-render-result*/}
+### Passo un componente personalizzato, ma i metodi `Children` non mostrano il suo risultato di renderizzazione {/*i-pass-a-custom-component-but-the-children-methods-dont-show-its-render-result*/}
-Suppose you pass two children to `RowList` like this:
+Supponiamo di passare due children a `RowList` così:
```js
@@ -944,6 +951,6 @@ Suppose you pass two children to `RowList` like this:
```
-If you do `Children.count(children)` inside `RowList`, you will get `2`. Even if `MoreRows` renders 10 different items, or if it returns `null`, `Children.count(children)` will still be `2`. From the `RowList`'s perspective, it only "sees" the JSX it has received. It does not "see" the internals of the `MoreRows` component.
+Se esegui `Children.count(children)` dentro `RowList`, otterrai `2`. Anche se `MoreRows` renderizza 10 elementi diversi, o se restituisce `null`, `Children.count(children)` sarà comunque `2`. Dal punto di vista di `RowList`, "vede" solo il JSX che ha ricevuto. Non "vede" l'interno del componente `MoreRows`.
-The limitation makes it hard to extract a component. This is why [alternatives](#alternatives) are preferred to using `Children`.
+Questa limitazione rende difficile estrarre un componente. Per questo motivo le [alternative](#alternatives) sono preferite all'uso di `Children`.
diff --git a/src/content/reference/react/cloneElement.md b/src/content/reference/react/cloneElement.md
index 91d501b72..0263a87a9 100644
--- a/src/content/reference/react/cloneElement.md
+++ b/src/content/reference/react/cloneElement.md
@@ -1,16 +1,23 @@
---
title: cloneElement
+translationStatus: ai-draft
---
+
+
+Questa pagina è stata tradotta automaticamente e supervisionata da un maintainer. Un'ulteriore revisione da parte della community sarebbe comunque utile. [Migliora questa traduzione](https://github.com/reactjs/it.react.dev/edit/main/src/content/reference/react/cloneElement.md).
+
+
+
-Using `cloneElement` is uncommon and can lead to fragile code. [See common alternatives.](#alternatives)
+L'uso di `cloneElement` è poco comune e può portare a codice fragile. [Vedi le alternative comuni.](#alternatives)
-`cloneElement` lets you create a new React element using another element as a starting point.
+`cloneElement` ti permette di creare un nuovo elemento React usando un altro elemento come punto di partenza.
```js
const clonedElement = cloneElement(element, props, ...children)
@@ -26,7 +33,7 @@ const clonedElement = cloneElement(element, props, ...children)
### `cloneElement(element, props, ...children)` {/*cloneelement*/}
-Call `cloneElement` to create a React element based on the `element`, but with different `props` and `children`:
+Chiama `cloneElement` per creare un elemento React basato su `element`, ma con `props` e `children` diversi:
```js
import { cloneElement } from 'react';
@@ -43,42 +50,42 @@ const clonedElement = cloneElement(
console.log(clonedElement); // Goodbye
```
-[See more examples below.](#usage)
+[Vedi altri esempi sotto.](#usage)
#### Parameters {/*parameters*/}
-* `element`: The `element` argument must be a valid React element. For example, it could be a JSX node like ``, the result of calling [`createElement`](/reference/react/createElement), or the result of another `cloneElement` call.
+* `element`: L'argomento `element` deve essere un elemento React valido. Ad esempio, può essere un nodo JSX come ``, il risultato di una chiamata a [`createElement`](/reference/react/createElement) o il risultato di un'altra chiamata a `cloneElement`.
-* `props`: The `props` argument must either be an object or `null`. If you pass `null`, the cloned element will retain all of the original `element.props`. Otherwise, for every prop in the `props` object, the returned element will "prefer" the value from `props` over the value from `element.props`. The rest of the props will be filled from the original `element.props`. If you pass `props.key` or `props.ref`, they will replace the original ones.
+* `props`: L'argomento `props` deve essere un oggetto oppure `null`. Se passi `null`, l'elemento clonato conserverà tutte le `element.props` originali. Altrimenti, per ogni prop nell'oggetto `props`, l'elemento restituito "preferirà" il valore da `props` rispetto al valore da `element.props`. Le altre props verranno prese dalle `element.props` originali. Se passi `props.key` o `props.ref`, sostituiranno quelli originali.
-* **optional** `...children`: Zero or more child nodes. They can be any React nodes, including React elements, strings, numbers, [portals](/reference/react-dom/createPortal), empty nodes (`null`, `undefined`, `true`, and `false`), and arrays of React nodes. If you don't pass any `...children` arguments, the original `element.props.children` will be preserved.
+* **optional** `...children`: Zero o più nodi figli. Possono essere qualsiasi nodo React, inclusi elementi React, stringhe, numeri, [portali](/reference/react-dom/createPortal), nodi vuoti (`null`, `undefined`, `true` e `false`) e array di nodi React. Se non passi argomenti `...children`, verranno preservati gli `element.props.children` originali.
#### Returns {/*returns*/}
-`cloneElement` returns a React element object with a few properties:
+`cloneElement` restituisce un oggetto elemento React con alcune proprietà:
-* `type`: Same as `element.type`.
-* `props`: The result of shallowly merging `element.props` with the overriding `props` you have passed.
-* `ref`: The original `element.ref`, unless it was overridden by `props.ref`.
-* `key`: The original `element.key`, unless it was overridden by `props.key`.
+* `type`: Uguale a `element.type`.
+* `props`: Il risultato della fusione superficiale di `element.props` con le `props` di override che hai passato.
+* `ref`: La `element.ref` originale, a meno che non sia stata sovrascritta da `props.ref`.
+* `key`: La `element.key` originale, a meno che non sia stata sovrascritta da `props.key`.
-Usually, you'll return the element from your component or make it a child of another element. Although you may read the element's properties, it's best to treat every element as opaque after it's created, and only render it.
+Di solito restituirai l'elemento dal tuo componente o lo renderai come figlio di un altro elemento. Anche se puoi leggere le proprietà dell'elemento, è meglio trattare ogni elemento come opaco dopo la creazione e limitarti a renderizzarlo.
#### Caveats {/*caveats*/}
-* Cloning an element **does not modify the original element.**
+* Clonare un elemento **non modifica l'elemento originale.**
-* You should only **pass children as multiple arguments to `cloneElement` if they are all statically known,** like `cloneElement(element, null, child1, child2, child3)`. If your children are dynamic, pass the entire array as the third argument: `cloneElement(element, null, listItems)`. This ensures that React will [warn you about missing `key`s](/learn/rendering-lists#keeping-list-items-in-order-with-key) for any dynamic lists. For static lists this is not necessary because they never reorder.
+* Dovresti **passare i children come argomenti multipli a `cloneElement` solo se sono tutti staticamente noti,** come `cloneElement(element, null, child1, child2, child3)`. Se i tuoi children sono dinamici, passa l'intero array come terzo argomento: `cloneElement(element, null, listItems)`. In questo modo React ti [avviserà delle `key` mancanti](/learn/rendering-lists#keeping-list-items-in-order-with-key) per qualsiasi lista dinamica. Per le liste statiche non è necessario, perché non vengono mai riordinate.
-* `cloneElement` makes it harder to trace the data flow, so **try the [alternatives](#alternatives) instead.**
+* `cloneElement` rende più difficile tracciare il flusso dei dati, quindi **prova le [alternative](#alternatives).**
---
## Usage {/*usage*/}
-### Overriding props of an element {/*overriding-props-of-an-element*/}
+### Sovrascrivere le props di un elemento {/*overriding-props-of-an-element*/}
-To override the props of some React element, pass it to `cloneElement` with the props you want to override:
+Per sovrascrivere le props di un elemento React, passalo a `cloneElement` con le props che vuoi sovrascrivere:
```js [[1, 5, "|
"], [2, 6, "{ isHighlighted: true }"], [3, 4, "clonedElement"]]
import { cloneElement } from 'react';
@@ -90,11 +97,11 @@ const clonedElement = cloneElement(
);
```
-Here, the resulting cloned element will be `|
`.
+Qui, l'elemento clonato risultante sarà `|
`.
-**Let's walk through an example to see when it's useful.**
+**Vediamo un esempio per capire quando è utile.**
-Imagine a `List` component that renders its [`children`](/learn/passing-props-to-a-component#passing-jsx-as-children) as a list of selectable rows with a "Next" button that changes which row is selected. The `List` component needs to render the selected `Row` differently, so it clones every `` child that it has received, and adds an extra `isHighlighted: true` or `isHighlighted: false` prop:
+Immagina un componente `List` che renderizza i suoi [`children`](/learn/passing-props-to-a-component#passing-jsx-as-children) come lista di righe selezionabili con un pulsante "Next" che cambia quale riga è selezionata. Il componente `List` deve renderizzare in modo diverso la `Row` selezionata, quindi clona ogni child `` che ha ricevuto e aggiunge una prop extra `isHighlighted: true` o `isHighlighted: false`:
```js {6-8}
export default function List({ children }) {
@@ -108,7 +115,7 @@ export default function List({ children }) {
)}
```
-Let's say the original JSX received by `List` looks like this:
+Supponiamo che il JSX originale ricevuto da `List` sia questo:
```js {2-4}
@@ -118,7 +125,7 @@ Let's say the original JSX received by `List` looks like this:
```
-By cloning its children, the `List` can pass extra information to every `Row` inside. The result looks like this:
+Clonando i suoi children, `List` può passare informazioni extra a ogni `Row` al suo interno. Il risultato è simile a questo:
```js {4,8,12}
@@ -137,7 +144,7 @@ By cloning its children, the `List` can pass extra information to every `Row` in
```
-Notice how pressing "Next" updates the state of the `List`, and highlights a different row:
+Nota come premere "Next" aggiorna lo state di `List` ed evidenzia una riga diversa:
@@ -232,11 +239,11 @@ button {
-To summarize, the `List` cloned the `|
` elements it received and added an extra prop to them.
+In sintesi, `List` ha clonato gli elementi `|
` che ha ricevuto e ha aggiunto loro una prop extra.
-Cloning children makes it hard to tell how the data flows through your app. Try one of the [alternatives.](#alternatives)
+Clonare i children rende difficile capire come i dati scorrono nella tua app. Prova una delle [alternative.](#alternatives)
@@ -244,9 +251,9 @@ Cloning children makes it hard to tell how the data flows through your app. Try
## Alternatives {/*alternatives*/}
-### Passing data with a render prop {/*passing-data-with-a-render-prop*/}
+### Passare dati con una render prop {/*passing-data-with-a-render-prop*/}
-Instead of using `cloneElement`, consider accepting a *render prop* like `renderItem`. Here, `List` receives `renderItem` as a prop. `List` calls `renderItem` for every item and passes `isHighlighted` as an argument:
+Invece di usare `cloneElement`, valuta di accettare una *render prop* come `renderItem`. Qui, `List` riceve `renderItem` come prop. `List` chiama `renderItem` per ogni elemento e passa `isHighlighted` come argomento:
```js {1,7}
export default function List({ items, renderItem }) {
@@ -259,7 +266,7 @@ export default function List({ items, renderItem }) {
})}
```
-The `renderItem` prop is called a "render prop" because it's a prop that specifies how to render something. For example, you can pass a `renderItem` implementation that renders a `` with the given `isHighlighted` value:
+La prop `renderItem` si chiama "render prop" perché è una prop che specifica come renderizzare qualcosa. Ad esempio, puoi passare un'implementazione di `renderItem` che renderizza una `` con il valore `isHighlighted` dato:
```js {3,7}
```
-The end result is the same as with `cloneElement`:
+Il risultato finale è lo stesso di `cloneElement`:
```js {4,8,12}
@@ -293,7 +300,7 @@ The end result is the same as with `cloneElement`:
```
-However, you can clearly trace where the `isHighlighted` value is coming from.
+Tuttavia, puoi tracciare chiaramente da dove proviene il valore `isHighlighted`.
@@ -389,22 +396,22 @@ button {
-This pattern is preferred to `cloneElement` because it is more explicit.
+Questo pattern è preferibile a `cloneElement` perché è più esplicito.
---
-### Passing data through context {/*passing-data-through-context*/}
+### Passare dati tramite context {/*passing-data-through-context*/}
-Another alternative to `cloneElement` is to [pass data through context.](/learn/passing-data-deeply-with-context)
+Un'altra alternativa a `cloneElement` è [passare dati tramite context.](/learn/passing-data-deeply-with-context)
-For example, you can call [`createContext`](/reference/react/createContext) to define a `HighlightContext`:
+Ad esempio, puoi chiamare [`createContext`](/reference/react/createContext) per definire un `HighlightContext`:
```js
export const HighlightContext = createContext(false);
```
-Your `List` component can wrap every item it renders into a `HighlightContext` provider:
+Il tuo componente `List` può avvolgere ogni elemento che renderizza in un provider `HighlightContext`:
```js {8,10}
export default function List({ items, renderItem }) {
@@ -421,7 +428,7 @@ export default function List({ items, renderItem }) {
})}
```
-With this approach, `Row` does not need to receive an `isHighlighted` prop at all. Instead, it reads the context:
+Con questo approccio, `Row` non deve ricevere affatto una prop `isHighlighted`. Legge invece il context:
```js src/Row.js {2}
export default function Row({ title }) {
@@ -429,7 +436,7 @@ export default function Row({ title }) {
// ...
```
-This allows the calling component to not know or worry about passing `isHighlighted` to ``:
+In questo modo il componente chiamante non deve conoscere o preoccuparsi di passare `isHighlighted` a ``:
```js {4}
```
-Instead, `List` and `Row` coordinate the highlighting logic through context.
+Invece, `List` e `Row` coordinano la logica di evidenziazione tramite context.
@@ -550,13 +557,13 @@ button {
-[Learn more about passing data through context.](/reference/react/useContext#passing-data-deeply-into-the-tree)
+[Scopri di più sul passaggio di dati tramite context.](/reference/react/useContext#passing-data-deeply-into-the-tree)
---
-### Extracting logic into a custom Hook {/*extracting-logic-into-a-custom-hook*/}
+### Estrarre la logica in un custom hook {/*extracting-logic-into-a-custom-hook*/}
-Another approach you can try is to extract the "non-visual" logic into your own Hook, and use the information returned by your Hook to decide what to render. For example, you could write a `useList` custom Hook like this:
+Un altro approccio che puoi provare è estrarre la logica "non visuale" in un tuo Hook e usare le informazioni restituite dall'Hook per decidere cosa renderizzare. Ad esempio, puoi scrivere un custom hook `useList` come questo:
```js
import { useState } from 'react';
@@ -575,7 +582,7 @@ export default function useList(items) {
}
```
-Then you could use it like this:
+Poi puoi usarlo così:
```js {2,9,13}
export default function App() {
@@ -598,7 +605,7 @@ export default function App() {
}
```
-The data flow is explicit, but the state is inside the `useList` custom Hook that you can use from any component:
+Il flusso dei dati è esplicito, ma lo state è dentro il custom hook `useList` che puoi usare da qualsiasi componente:
@@ -691,4 +698,4 @@ button {
-This approach is particularly useful if you want to reuse this logic between different components.
+Questo approccio è particolarmente utile se vuoi riutilizzare questa logica tra componenti diversi.