Renderização de listas - Mllara/react-project GitHub Wiki

-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

⚠️ **GitHub.com Fallback** ⚠️