0

Lista com React.JS

#HTML #ReactJS #CSS
G
Gabriel Martins

Fiz uma lista redenizada com React, semelhante com a que é apresentada no curso aqui da DIO.


Partes mas importante:

==> Como passar uma lista para um componente?


R: Use a função Lista.map( Componente)

Onde:

Lista = [

{ nome: Gabriel,

habilidades: [ PHP, CSS]

},

{

nome: João,

habilidades: [ HTML, REACT]

}

]

const Componente = ({ name, habilidade }) => {

return(

<div> <p> {name} </p>

{habilidade.map(Lista)}

</div>

)

}


Explanação: A função map pegará os termos da lista e transferira para Componente, onde name = { Gabriel , João } e hab = { [PHP, CSS], [HTML, REACT]}.


Detalhe que como é uma lista com duas colunas é necessário que o Componente seja declarado com {}.


Ou seja, assim estaria errado:

const Componente = (name, habilidade ) => {

return(

<div> ... </div>

)

}


Já na Lista tem-se o código, sem {}, pois é apenas uma linha [PHP, CSS], quando for rendenizado o primeiro usuário, ou [HTML, REACT], quando for rendenizado o segundo.


const Lista = (hab) => {


return(

<div>

{hab}

</div>


)


}


Thauuu gente !!!! se quiserem eu coloco o código disponível no GitHub!!!!! ;)

0
7

Comentários (0)

None

Brasil