{"id":69523,"date":"2023-05-26T11:07:06","date_gmt":"2023-05-26T10:07:06","guid":{"rendered":"https:\/\/kinsta.com\/it\/?p=69523&preview=true&preview_id=69523"},"modified":"2023-09-04T11:27:40","modified_gmt":"2023-09-04T10:27:40","slug":"rendering-condizionale-react","status":"publish","type":"post","link":"https:\/\/kinsta.com\/it\/blog\/rendering-condizionale-react\/","title":{"rendered":"Il Rendering Condizionale in React"},"content":{"rendered":"

Il rendering condizionale \u00e8 una potente funzionalit\u00e0 di React che consente agli sviluppatori di eseguire il rendering dei componenti in base a determinate condizioni.<\/p>\n

\u00c8 un concetto fondamentale che gioca un ruolo importante nella creazione di applicazioni web dinamiche e interattive.<\/p>\n

In questa guida completa, analizzeremo in profondit\u00e0 il rendering condizionale in React, trattando le tecniche di base e quelle pi\u00f9 avanzate con esempi pratici.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Il rendering condizionale in React<\/h2>\n

Il rendering condizionale in React<\/a> consente di controllare dinamicamente i contenuti visualizzati sullo schermo in base a valori specifici che possono essere memorizzati in una variabile, uno stato o un oggetto.<\/p>\n

Questo pu\u00f2 essere estremamente utile in scenari in cui si desidera mostrare o nascondere determinati elementi dell’interfaccia utente, modificare il layout di una pagina o visualizzare contenuti diversi in base alle interazioni dell’utente.<\/p>\n

Il rendering condizionale \u00e8 importante nelle applicazioni React perch\u00e9 permette di creare interfacce utente dinamiche e interattive in grado di rispondere ai dati e alle interazioni degli utenti in tempo reale.<\/p>\n

Contribuisce a migliorare le prestazioni<\/a> e l’efficienza delle applicazioni evitando il rendering di componenti o elementi non necessari.<\/p>\n\n

Tecniche di base per il rendering condizionale<\/h2>\n

Ci sono diverse tecniche di base per il rendering condizionale in React. Analizziamole in dettaglio.<\/p>\n

Rendering condizionale con l’istruzione if<\/h3>\n

Uno dei modi pi\u00f9 semplici per implementare il rendering condizionale in React \u00e8 offerto dalla tradizionale istruzione if<\/code>.<\/p>\n

if (condition) {\n    return <p>Expression 1<\/p>;\n  } else {\n    return <p>Expression 2<\/p>;\n  }<\/code><\/pre>\n
L’istruzione JavaScript if<\/code> pu\u00f2 essere utilizzata all’interno del metodo render()<\/code> del componente per eseguire il rendering condizionale dei contenuti in base a una determinata condizione.<\/p>\n
Ad esempio, si pu\u00f2 utilizzare l’istruzione if per visualizzare uno spinner di caricamento in attesa del caricamento dei dati:<\/p>\n
import { useState, useEffect } from 'react';\nimport Spinner from '.\/Spinner';\n\nconst MyComponent = () => {\n  const [isLoading, setIsLoading] = useState(true);\n  const [data, setData] = useState(null);\n\n  useEffect(() => {\n    \/\/ Fetch data from an API\n    fetch('https:\/\/example.com\/data')\n      .then((response) => response.json())\n      .then((data) => {\n        setData(data);\n        setIsLoading(false);\n      });\n  }, []);\n\n  if (isLoading) {\n    return <Spinner \/>;\n  }\n\n  return <div>{\/* Render the data here *\/}<\/div>;\n};\n\nexport default MyComponent;<\/code><\/pre>\n
In questo esempio, MyComponent<\/code> recupera i dati da un’API utilizzando l’hook useEffect<\/code>. In attesa del caricamento dei dati, visualizziamo un componente Spinner utilizzando l’istruzione if<\/code>.<\/p>\n
Un altro esempio pu\u00f2 essere il rendering di un’interfaccia di fallback quando si verifica un errore durante il rendering del componente:<\/p>\n
const MyComponent = ({ data }) => {\n  if (!data) {\n    return <p>Something went wrong. Please try again later.<\/p>;\n  }\n\n  return <div>{\/* Render the data here *\/}<\/div>;\n};\n\nexport default MyComponent;<\/code><\/pre>\n
In questo codice, abbiamo un MyComponent<\/code> che accetta una propriet\u00e0 data<\/code>. Se la propriet\u00e0 data<\/code> \u00e8 errata, renderizziamo un messaggio di errore utilizzando l’istruzione if<\/code>.<\/p>\n
Infine, con l’istruzione if<\/code> \u00e8 possibile visualizzare contenuti diversi per diversi ruoli utente:<\/p>\n
const MyComponent = ({ user }) => {\n  if (user.role === 'admin') {\n    return <p>Welcome, admin!<\/p>;\n  } else if (user.role === 'user') {\n    return <p>Welcome, user!<\/p>;\n  } else {\n    return <p>You are not authorized to access this page.<\/p>;\n  }\n};\n\nexport default MyComponent;<\/code><\/pre>\n
In questo codice, abbiamo un MyComponent<\/code> che accetta una propriet\u00e0 user<\/code>. A seconda della propriet\u00e0 user.role<\/code>, visualizziamo contenuti diversi utilizzando l’istruzione if<\/code>.<\/p>\n
Rendering condizionale con l’operatore ternario<\/h3>\n
Un altro modo conciso per implementare il rendering condizionale in React \u00e8 offerto dall’operatore ternario (?) all’interno di JSX.<\/p>\n
L’operatore ternario permette di scrivere un’istruzione inline if-else compatta specificando 3 operandi. Il primo operando \u00e8 la condizione, mentre gli altri due operandi sono le espressioni. Se la condizione \u00e8 true<\/code>, verr\u00e0 eseguita la prima espressione, altrimenti la seconda.<\/p>\n
Ad esempio, \u00e8 possibile eseguire il rendering di diversi componenti in base a una propriet\u00e0:<\/p>\n
import ComponentA from '.\/ComponentA';\nimport ComponentB from '.\/ComponentB';\n\nconst ExampleComponent = ({ shouldRenderComponentA }) => {\n  return (\n    <div>\n      {shouldRenderComponentA ? <ComponentA \/> : <ComponentB \/>}\n    <\/div>\n  );\n};\n\nexport default ExampleComponent;<\/code><\/pre>\n
In questo codice, abbiamo un ExampleComponent<\/code> che accetta un oggetto chiamato shouldRenderComponentA<\/code>. Utilizziamo l’operatore ternario per rendere condizionalmente ComponentA<\/code> o ComponentB<\/code> in base al valore della propriet\u00e0.<\/p>\n
Si pu\u00f2 anche rendere un testo diverso in base a uno stato:<\/p>\n
import { useState } from 'react';\n\nconst ExampleComponent = () => {\n  const [showMessage, setShowMessage] = useState(false);\n\n  return (\n    <div>\n      <button onClick={() => setShowMessage(!showMessage)}>\n        {showMessage ? 'Hide message' : 'Show message'}\n      <\/button>\n      {showMessage ? <p>Hello, world!<\/p> : null}\n    <\/div>\n  );\n};\n\nexport default ExampleComponent;<\/code><\/pre>\n
In questo esempio, utilizziamo l’operatore ternario per rendere in modo condizionale un testo diverso a seconda del valore dello stato showMessage<\/code>. Quando il pulsante viene cliccato, il valore di showMessage<\/code> viene modificato e il testo viene visualizzato o nascosto di conseguenza.<\/p>\n
Infine, \u00e8 possibile visualizzare uno spinner di caricamento mentre i dati vengono recuperati:<\/p>\n
import { useState, useEffect } from 'react';\nimport Spinner from '.\/Spinner';\n\nconst ExampleComponent = () => {\n  const [isLoading, setIsLoading] = useState(true);\n  const [data, setData] = useState(null);\n\n  useEffect(() => {\n    const fetchData = async () => {\n      const response = await fetch('https:\/\/jsonplaceholder.typicode.com\/todos\/1');\n      const jsonData = await response.json();\n      setData(jsonData);\n      setIsLoading(false);\n    };\n    fetchData();\n  }, []);\n\n  return (\n    <div>\n      {isLoading ? <Spinner \/> : <p>{data.title}<\/p>}\n    <\/div>\n  );\n};\n\nexport default ExampleComponent;<\/code><\/pre>\n
In questo esempio, utilizziamo l’operatore ternario per visualizzare in modo condizionale uno spinner di caricamento mentre i dati vengono prelevati da un’API. Una volta che i dati sono disponibili, rendiamo la propriet\u00e0 title<\/code> utilizzando l’operatore ternario.<\/p>\n
Rendering condizionale con gli operatori logici AND e OR<\/h3>\n
Per implementare il rendering condizionale in React \u00e8 possibile utilizzare anche gli operatori logici AND (&&<\/code>) e OR (||<\/code>).<\/p>\n
L’operatore logico AND permette di eseguire il rendering di un componente solo se una certa condizione \u00e8 vera, mentre l’operatore logico OR permette di eseguire il rendering di un componente se una delle due condizioni \u00e8 vera.<\/p>\n
Questi operatori sono utili quando si hanno delle condizioni semplici che stabiliscono se un componente deve essere renderizzato o meno. Ad esempio, se si vuole effettuare il rendering di un pulsante solo se un modulo \u00e8 valido, si pu\u00f2 utilizzare l’operatore logico AND in questo modo:<\/p>\n
import { useState } from 'react';\n\nconst FormComponent = () => {\n  const [formValues, setFormValues] = useState({ username: \"\", password: \"\" });\n\n  const isFormValid = formValues.username && formValues.password;\n\n  const handleSubmit = (event) => {\n    event.preventDefault();\n    \/\/ Submit form data\n  };\n\n  return (\n    <form onSubmit={handleSubmit}>\n      <input\n        type=\"text\"\n        value={formValues.username}\n        placeholder=\"Type Username...\"\n        onChange={(e) =>\n          setFormValues({ ...formValues, username: e.target.value })\n        }\n      \/>\n      <br \/>\n      <input\n        type=\"password\"\n        value={formValues.password}\n        placeholder=\"Type Password...\"\n        onChange={(e) =>\n          setFormValues({ ...formValues, password: e.target.value })\n        }\n      \/>\n      {isFormValid && <button type=\"submit\">Submit<\/button>}\n    <\/form>\n  );\n};\n\nexport default FormComponent;<\/code><\/pre>\n
In questo esempio, abbiamo un modulo FormComponent<\/code> con due campi di input per username<\/code> e password<\/code>. Stiamo utilizzando l’hook useState<\/code> per gestire i valori del modulo e la variabile isFormValid<\/code> per verificare se entrambi i campi di input hanno un valore. Utilizzando l’operatore logico AND (&&), effettuiamo il rendering del pulsante di invio solo se isFormValid<\/code> \u00e8 vero. Questo fa s\u00ec che il pulsante sia abilitato solo quando il modulo \u00e8 valido.<\/p>\n
Allo stesso modo, potete utilizzare l’operatore OR per visualizzare un messaggio di caricamento se i dati sono ancora in fase di caricamento o un messaggio di errore nel caso in cui si verifichi un errore:<\/p>\n
import React, { useEffect, useState } from 'react';\n\nconst DataComponent = () => {\n  const [data, setData] = useState(null);\n  const [isLoading, setIsLoading] = useState(true);\n  const [errorMessage, setErrorMessage] = useState('');\n\n  useEffect(() => {\n    const fetchData = async () => {\n      try {\n        const response = await fetch('https:\/\/api.example.com\/data');\n        const data = await response.json();\n        setData(data);\n      } catch (error) {\n        setErrorMessage('An error occurred while fetching data.');\n      } finally {\n        setIsLoading(false);\n      }\n    };\n\n    fetchData();\n  }, []);\n\n  return (\n    <>\n      {errorMessage || isLoading ? (\n        <p>{errorMessage || 'Loading...'}<\/p>\n      ) : (\n        <ul>\n          {data.map((item) => (\n            <li key={item.id}>{item.name}<\/li>\n          ))}\n        <\/ul>\n      )}\n    <\/>\n  );\n};\n\nexport default DataComponent;<\/code><\/pre>\n
In questo esempio, DataComponent<\/code> recupera i dati da un’API tramite fetch e li visualizza in un elenco. Utilizziamo l’hook useState<\/code> per gestire i dati, lo stato di caricamento e il messaggio di errore. Utilizzando l’operatore logico OR (||), possiamo visualizzare un messaggio di caricamento o un messaggio di errore se una delle due condizioni \u00e8 vera. In questo modo l’utente vede un messaggio che indica lo stato attuale del processo di acquisizione dei dati.<\/p>\n
L’utilizzo degli operatori logici AND e OR per il rendering condizionale in React \u00e8 una soluzione concisa e leggibile per gestire condizioni semplici. Tuttavia, nel caso di una logica pi\u00f9 complessa, \u00e8 meglio seguire altri approcci come le istruzioni di switch<\/code>.<\/p>\n
Tecniche avanzate per il rendering condizionale<\/h2>\n
A seconda dei requisiti dell’applicazione, il rendering condizionale in React pu\u00f2 essere pi\u00f9 o meno complesso. Ecco alcune tecniche avanzate che si possono utilizzare per il rendering condizionale in situazioni di maggiore complessit\u00e0.<\/p>\n
Rendering condizionale con le dichiarazioni switch<\/h3>\n
Sebbene le istruzioni if e gli operatori ternari siano utilizzati spesso per il rendering condizionale, a volte un’istruzione switch<\/code> pu\u00f2 essere pi\u00f9 appropriata, soprattutto quando bisogna testare condizioni multiple.<\/p>\n
Ecco un esempio:<\/p>\n
import React from 'react';\nconst MyComponent = ({ userType }) => {\n  switch (userType) {\n    case 'admin':\n      return <p>Welcome, admin user!<\/p>;\n    case 'user':\n      return <p>Welcome, regular user!<\/p>;\n    default:\n      return <p>Please log in to continue.<\/p>;\n  }\n};\nexport default MyComponent;<\/code><\/pre>\n
In questo codice, viene utilizzata un’istruzione switch<\/code> per eseguire il rendering condizionale dei contenuti in base alla propriet\u00e0 userType<\/code>. Questo approccio pu\u00f2 essere utile quando si tratta di condizioni multiple e fornisce una soluzione pi\u00f9 ordinata e leggibile per gestire una logica complessa.<\/p>\n
Rendering condizionale con React Router<\/h3>\n
React Router \u00e8 una libreria che permette di gestire il routing lato client nelle applicazioni React e di eseguire il rendering condizionale dei componenti in base al percorso corrente.<\/p>\n
Ecco un esempio di rendering condizionale con React Router:<\/p>\n
import { useState } from 'react';\nimport { BrowserRouter as Router, Route, Switch } from 'react-router-dom';\n\nimport Home from '.\/components\/Home';\nimport Login from '.\/components\/Login';\nimport Dashboard from '.\/components\/Dashboard';\nimport NotFound from '.\/components\/NotFound';\n\nconst App = () => {\n  const [isLoggedIn, setIsLoggedIn] = useState(false);\n\n  return (\n    <Router>\n      <Switch>\n        <Route exact path=\"\/\" component={Home} \/>\n        <Route path=\"\/login\">\n          <Login setIsLoggedIn={setIsLoggedIn} \/>\n        <\/Route>\n        {isLoggedIn ? (\n          <Route path=\"\/dashboard\" component={Dashboard} \/>\n        ) : (\n          <Route component={NotFound} \/>\n        )}\n      <\/Switch>\n    <\/Router>\n  );\n};\n\nexport default App;<\/code><\/pre>\n
In questo codice, utilizziamo lo stato isLoggedIn<\/code> per renderizzare in modo condizionale il componente Dashboard<\/code> se l’utente ha effettuato l’accesso, oppure il componente NotFound<\/code> se l’utente non ha effettuato l’accesso. Una volta che l’utente ha effettuato l’accesso, il componente Login<\/code> imposta lo stato isLoggedIn<\/code> su true<\/code>.<\/p>\n
QUi utilizziamo la propriet\u00e0 child del componente <Route><\/code> per passare il componente Login<\/code> e la funzione setIsLoggedIn<\/code>. Questo ci permette di passare le propriet\u00e0 al componente Login<\/code> senza specificarli nella propriet\u00e0 path<\/code>.<\/p>\n\n
Riepilogo<\/h2>\n
Il rendering condizionale permette di aggiornare dinamicamente l’interfaccia utente in base a diverse condizioni.<\/p>\n
Ci sono approcci diversi a seconda della complessit\u00e0 della logica che genera l’interfaccia dell’applicazione.<\/p>\n
Ricordate di mantenere il codice pulito, organizzato e leggibile e di testare sempre attentamente la logica del rendering condizionale per assicurarvi che funzioni sempre come previsto.<\/p>\n
State cercando la soluzione di hosting ideale per le vostre applicazioni React? Provate gratuitamente l’Hosting di Applicazioni di Kinsta<\/a>!<\/p>\n","protected":false},"excerpt":{"rendered":"
Il rendering condizionale \u00e8 una potente funzionalit\u00e0 di React che consente agli sviluppatori di eseguire il rendering dei componenti in base a determinate condizioni. \u00c8 un …<\/p>\n","protected":false},"author":287,"featured_media":69524,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[26212],"class_list":["post-69523","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-react"],"yoast_head":"\nIl Rendering Condizionale in React - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Scopri come funziona il rendering condizionale in React e porta le tue capacit\u00e0 di sviluppo web a un livello superiore.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/it\/blog\/rendering-condizionale-react\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Il Rendering Condizionale in React\" \/>\n<meta property=\"og:description\" content=\"Scopri come funziona il rendering condizionale in React e porta le tue capacit\u00e0 di sviluppo web a un livello superiore.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/it\/blog\/rendering-condizionale-react\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstaitalia\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-05-26T10:07:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-09-04T10:27:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/react-conditional-render.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Joel Olawanle\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Scopri come funziona il rendering condizionale in React e porta le tue capacit\u00e0 di sviluppo web a un livello superiore.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/react-conditional-render.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@olawanle_joel\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_IT\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joel Olawanle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/rendering-condizionale-react\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/rendering-condizionale-react\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"Il Rendering Condizionale in React\",\"datePublished\":\"2023-05-26T10:07:06+00:00\",\"dateModified\":\"2023-09-04T10:27:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/rendering-condizionale-react\/\"},\"wordCount\":1270,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/it\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/rendering-condizionale-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/react-conditional-render-1.jpg\",\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/it\/blog\/rendering-condizionale-react\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/rendering-condizionale-react\/\",\"url\":\"https:\/\/kinsta.com\/it\/blog\/rendering-condizionale-react\/\",\"name\":\"Il Rendering Condizionale in React - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/it\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/rendering-condizionale-react\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/rendering-condizionale-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/react-conditional-render-1.jpg\",\"datePublished\":\"2023-05-26T10:07:06+00:00\",\"dateModified\":\"2023-09-04T10:27:40+00:00\",\"description\":\"Scopri come funziona il rendering condizionale in React e porta le tue capacit\u00e0 di sviluppo web a un livello superiore.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/rendering-condizionale-react\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/it\/blog\/rendering-condizionale-react\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/rendering-condizionale-react\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/react-conditional-render-1.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/react-conditional-render-1.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/rendering-condizionale-react\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/it\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React\",\"item\":\"https:\/\/kinsta.com\/it\/argomenti\/react\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Il Rendering Condizionale in React\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/it\/#website\",\"url\":\"https:\/\/kinsta.com\/it\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluzioni di hosting premium, veloci e sicure\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/it\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/it\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/it\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/it\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstaitalia\/\",\"https:\/\/x.com\/Kinsta_IT\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"caption\":\"Joel Olawanle\"},\"description\":\"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.\",\"sameAs\":[\"https:\/\/joelolawanle.com\/\",\"https:\/\/www.linkedin.com\/in\/olawanlejoel\/\",\"https:\/\/x.com\/olawanle_joel\",\"https:\/\/www.youtube.com\/@joelolawanle\"],\"gender\":\"male\",\"knowsAbout\":[\"JavaScript\",\"React\",\"Next.js\"],\"knowsLanguage\":[\"English\"],\"jobTitle\":\"Technical Editor\",\"worksFor\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/it\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Il Rendering Condizionale in React - Kinsta\u00ae","description":"Scopri come funziona il rendering condizionale in React e porta le tue capacit\u00e0 di sviluppo web a un livello superiore.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/it\/blog\/rendering-condizionale-react\/","og_locale":"it_IT","og_type":"article","og_title":"Il Rendering Condizionale in React","og_description":"Scopri come funziona il rendering condizionale in React e porta le tue capacit\u00e0 di sviluppo web a un livello superiore.","og_url":"https:\/\/kinsta.com\/it\/blog\/rendering-condizionale-react\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstaitalia\/","article_published_time":"2023-05-26T10:07:06+00:00","article_modified_time":"2023-09-04T10:27:40+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/react-conditional-render.jpg","type":"image\/jpeg"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Scopri come funziona il rendering condizionale in React e porta le tue capacit\u00e0 di sviluppo web a un livello superiore.","twitter_image":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/react-conditional-render.jpg","twitter_creator":"@olawanle_joel","twitter_site":"@Kinsta_IT","twitter_misc":{"Scritto da":"Joel Olawanle","Tempo di lettura stimato":"9 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/it\/blog\/rendering-condizionale-react\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/it\/blog\/rendering-condizionale-react\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/it\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"Il Rendering Condizionale in React","datePublished":"2023-05-26T10:07:06+00:00","dateModified":"2023-09-04T10:27:40+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/it\/blog\/rendering-condizionale-react\/"},"wordCount":1270,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/it\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/it\/blog\/rendering-condizionale-react\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/react-conditional-render-1.jpg","inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/it\/blog\/rendering-condizionale-react\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/it\/blog\/rendering-condizionale-react\/","url":"https:\/\/kinsta.com\/it\/blog\/rendering-condizionale-react\/","name":"Il Rendering Condizionale in React - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/it\/blog\/rendering-condizionale-react\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/it\/blog\/rendering-condizionale-react\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/react-conditional-render-1.jpg","datePublished":"2023-05-26T10:07:06+00:00","dateModified":"2023-09-04T10:27:40+00:00","description":"Scopri come funziona il rendering condizionale in React e porta le tue capacit\u00e0 di sviluppo web a un livello superiore.","breadcrumb":{"@id":"https:\/\/kinsta.com\/it\/blog\/rendering-condizionale-react\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/it\/blog\/rendering-condizionale-react\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/blog\/rendering-condizionale-react\/#primaryimage","url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/react-conditional-render-1.jpg","contentUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/react-conditional-render-1.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/it\/blog\/rendering-condizionale-react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/it\/"},{"@type":"ListItem","position":2,"name":"React","item":"https:\/\/kinsta.com\/it\/argomenti\/react\/"},{"@type":"ListItem","position":3,"name":"Il Rendering Condizionale in React"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/it\/#website","url":"https:\/\/kinsta.com\/it\/","name":"Kinsta\u00ae","description":"Soluzioni di hosting premium, veloci e sicure","publisher":{"@id":"https:\/\/kinsta.com\/it\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/it\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/it\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/it\/","logo":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstaitalia\/","https:\/\/x.com\/Kinsta_IT","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/it\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","caption":"Joel Olawanle"},"description":"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.","sameAs":["https:\/\/joelolawanle.com\/","https:\/\/www.linkedin.com\/in\/olawanlejoel\/","https:\/\/x.com\/olawanle_joel","https:\/\/www.youtube.com\/@joelolawanle"],"gender":"male","knowsAbout":["JavaScript","React","Next.js"],"knowsLanguage":["English"],"jobTitle":"Technical Editor","worksFor":"Kinsta","url":"https:\/\/kinsta.com\/it\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/69523","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/users\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/comments?post=69523"}],"version-history":[{"count":10,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/69523\/revisions"}],"predecessor-version":[{"id":72818,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/69523\/revisions\/72818"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/69523\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/69523\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/69523\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/69523\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/69523\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/69523\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/69523\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/69523\/translations\/es"},{"href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/69523\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/media\/69524"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/media?parent=69523"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/tags?post=69523"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/topic?post=69523"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}