Translation of the page "Lists and Keys"

GLOSSARY.md

@@ -18,6 +18,8 @@ Glossary of the translations of technical and React-specific terms.
 - tag
 - lifecycle
 - callback
+- console
+- warning
 
 
 # Common Translations

content/docs/nav.yml

@@ -26,7 +26,7 @@
     - id: conditional-rendering
       title: Conditional Rendering
     - id: lists-and-keys
-      title: Lists and Keys
+      title: Liste e Chiavi
     - id: forms
       title: Forms
     - id: lifting-state-up

examples/lists-and-keys/1.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+const numeri = [1, 2, 3, 4, 5];
+const lista = numeri.map(numero => <li>{numero}</li>);
+
+ReactDOM.render(
+  <ul>{lista}</ul>,
+  document.getElementById('root')
+);

examples/lists-and-keys/2.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+function ListaNumeri(props) {
+  const numeri = props.numeri;
+  const lista = numeri.map(numero => (
+    <li key={numero.toString()}>{numero}</li>
+  ));
+  return <ul>{lista}</ul>;
+}
+
+const numeri = [1, 2, 3, 4, 5];
+ReactDOM.render(
+  <ListaNumeri numeri={numeri} />,
+  document.getElementById('root')
+);

examples/lists-and-keys/3.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+function Numero(props) {
+  // Corretto! Non è necessario specificare la chiave qui:
+  return <li>{props.valore}</li>;
+}
+
+function ListaNumeri(props) {
+  const numeri = props.numeri;
+  const lista = numeri.map(numero => (
+    // Corretto! La chiave deve essere specificata all'interno dell'array.
+    <Numero key={numero.toString()} valore={numero} />
+  ));
+  return <ul>{lista}</ul>;
+}
+
+const numeri = [1, 2, 3, 4, 5];
+ReactDOM.render(
+  <ListaNumeri numeri={numeri} />,
+  document.getElementById('root')
+);

examples/lists-and-keys/4.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+function Blog(props) {
+  const sidebar = (
+    <ul>
+      {props.articoli.map(articolo => (
+        <li key={articolo.id}>{articolo.titolo}</li>
+      ))}
+    </ul>
+  );
+  const contenuto = props.articoli.map(articolo => (
+    <div key={articolo.id}>
+      <h3>{articolo.titolo}</h3>
+      <p>{articolo.testo}</p>
+    </div>
+  ));
+  return (
+    <div>
+      {sidebar}
+      <hr />
+      {contenuto}
+    </div>
+  );
+}
+
+const articoli = [
+  {
+    id: 1,
+    titolo: 'Ciao Mondo',
+    testo: 'Benvenuto in imparando React!',
+  },
+  {
+    id: 2,
+    titolo: 'Installazione',
+    testo: 'Puoi installare React usando npm.',
+  },
+];
+ReactDOM.render(
+  <Blog articoli={articoli} />,
+  document.getElementById('root')
+);

examples/lists-and-keys/5.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+function Numero(props) {
+  return <li>{props.valore}</li>;
+}
+
+function ListaNumeri(props) {
+  const numeri = props.numeri;
+  return (
+    <ul>
+      {numeri.map(numero => (
+        <Numero key={numero.toString()} valore={numero} />
+      ))}
+    </ul>
+  );
+}
+
+const numeri = [1, 2, 3, 4, 5];
+ReactDOM.render(
+  <ListaNumeri numeri={numeri} />,
+  document.getElementById('root')
+);