-
Notifications
You must be signed in to change notification settings - Fork 0
Renderização de listas
Mllara edited this page Mar 18, 2023
·
1 revision
-Para renderizar uma lista vamos precisar de um array;
-Depois utilizamos a função map, para percorrer cada um dos itens;
-Podendo assim renderizar algo na tela;
-É possível unir operadores condicionais com a renderização de listas;
**Na pasta OutraLista.js:
function OutraLista({itens}){
return (
<>
<h3>Lista de coisas boas:</h3>
{ itens.length > 0 ? ( //if ternario
itens.map((item, index) => (
<p key={index}>{item}</p>
))):( // : significa o else
<p>Não há itens na lista</p>
)}
</>
)
}
** Na pasta OutraLista:
import './App.css';
import OutraLista from './Components/OutraLista';
function App() {
const meuItens = ['React', 'Vue', 'Angular']
return (
<div className="App">
<h1>Renderização de Listas</h1>
<OutraLista itens={meuItens} />
<OutraLista itens={[]} />
</div>
);
}
export default App;
export default OutraLista