Trabalhando com LISTA em React usando a função MAP - Curso de React - Aula 13

#cfbcursos #react #reactjs

Trabalhando com LISTA em React usando a função MAP - Curso de React - Aula 13

Na aula de hoje do curso de React, vamos aprender como trabalhar com listas usando a função MAP de Javascript.

Com este recurso podemos indicar se um componentes será mostrado/renderizado ou não, além de outras possibilidades.

O React é uma biblioteca JavaScript de código aberto com foco em criar interfaces de usuário em páginas web. É mantido pelo Facebook, Instagram, outras empresas e uma comunidade de desenvolvedores individuais.

Em nosso curso de SQL você vai aprender os segredos e as técnicas de utilização do SQL.

Site do canal

Página de cursos no site

e-mails:

Outros Links:

Instagram: @cfbcursos
Twitter: @cfbcursos

vakinhas

Produção: Bruno P. Campos / CFB Cursos
Edição: Bruno P. Campos / CFB Cursos
Licença padrão do YouTube

[camillafranca]

Mais de um ano depois e essa aula permanece incrivel!

[lucianoprata]

Vc não tem noção do quanto esta me ajudando.

[Deryckdelucca]

Muito obrigado pela aula, foi de grande ajuda!!!

Aqui está um código pronto em relaçao ao que foi passado em aula ( feito em React Native, por isso tem algumas coisinhas diferentes):

import { Text, View } from 'react-native';

function App() {

const Carros = [
{nome: "Toyota RAV4", classificacao: "SUV", preco: 35000},
{nome: "Ford Mustang", classificacao: "Esportivo", preco: 55000},
{nome: "Honda Civic", classificacao: "Sedan", preco: 25000},
{nome: "Jeep Wrangler", classificacao: "SUV", preco: 40000},
{nome: "Porsche 911", classificacao: "Esportivo", preco: 120000}
];

const ListaCarros = Carros;
console.log('App started');
return (
<View>
<ul>{ListaCarros.map ( c =>
<li> {c.nome} - {c.classificacao} - R${c.preco} </li>
)}</ul>
</View>
);
}
export default App;

[hugorambo]

quero agradecer pelo excelente curso que nos proporcionou, muito obrigado por dividir tanto conhecimento de forma clara e direto ao ponto, e ainda por cima gratuito

[pauloofranco]

Obrigado, professor Bruno, pelo vídeo e pela aula!

[marcoshamil]

Amigo notempo 5:30 que vc falou que esta função não tem a chave, vc me salvou, fiquei horas procurando o meu erro e era a dita chave, muito obrigado

[mariaraquelcrl]

Estou estudando React e tentando criar projetos, preciso rever várias vezes cada função, porque tenho uma facilidade de esquecer. Muito obrigada por esse vídeo, ajudou bastante ao entendimento sobre map() e com certeza salvarei para assistir novamente em breve.

[zotuxe]

Poderia colocar desafios?? ia ajuda muito a treina oq aprendemos

[victorhugoalbuquerque]

Vou comentar santo em todas as aulas, só pra reforçar: Santo!

[rafael.amaral]

Achei incrível a aula, porém, eu estava procurando sobre componentes externos, que é o que você cita no final da aula, mas não mostra.
Uma pena, contudo, sua aula foi incrível. Obrigado!

[ramonbosi]

Professor, tenho uma duvida
Antes de tudo quero agradecer pelo excelente curso que nos proporcionou, muito obrigado por dividir tanto conhecimento de forma clara e direto ao ponto, e ainda por cima gratuito 🎉🎊🎉🎉🥳

Minha duvida é com relação ao atributo 'key' da <li> criada usando o método map, eu fiz um teste e criei a <li> sem o 'key' e o próprio React me da um aviso dizendo que é obrigatório elementos de listas terem a 'key'
Gostaria de saber o motivo de ser obrigatório e como acessar o valor da 'key' no React e seus usos
Desde já agradeço

[reuelsiIva]

Componentes crio com aquivo JS ou JSX?

[bartsilva]

eu ainda estou verde no javascript, quando vi em 2:31 pondo {carros} e lá no html imprime o valor do array, eu pensei: e como se faz isso no javascript puro sem react? tive um pouco de dificuldade, mas consegui resolver, bom pode não ser a melhor forma mas vale o aprendizado...
no script
const carros=['ALFA', 'BETA', 'OMEGA'];
const impArrat=(obj)=> {
obj.forEach(e => {
= carros.join(' - ');
});
}
impArrat(carros);
basicamente fiz uma arow function que recebe o array põe o conteúdo em uma tag p denominada car



no html
<p id="car"></p>

[alaelciolucas]

tem como lista as imagens dos carros também?

[mateusdegobi]

valeu, bruno.
estou com dúvidas na hora de imprimir na tela dois .map(), pois tenho um array dentro de outro array.
no terminal é impresso tudo ok, porém para imprimir em um elemento estou tendo dificuldade. tenho algo como:

areas: [
nomearea: 'Café',
periodos: [
{
colaboradores: [
{
nome: 'João'
},
{...}, {...}, {...}
]
}
]
]


gostaria de retornar, por exemplo, o nome dos colaboradores. estou usando algo como:
<ScrollView>
{
this.state.areas.map(area => {
area.periodos.map(periodo => {
=> {
return (
<Text>
{colaborador.nome}
</Text>
)
})
})
}
}
</ScrollView>


não consigo entender o que estou fazendo de errado.

acredito que seja algo em referência aos map(), return() e/ou nos "{}" ou "()", porém não encontro a forma correta de corrigir.

poderia me ajudar?

[giselesgomes]

que que acontece se eu tiver que fazer vários maps? Tô criando uma página com vários cards, e nessa página tem um search, um filtro com checkbox e uma paginação. Eu tenho um componente que renderiza os cards, e para isso acontecer usei um .map(). Mas eu tbm tenho um map pra searchbar, e outro pra paginação, e não tô entendendo como tudo isso vai funcionar junto.
Um map sempre anula o outro ... não sei se tenho que fazer alguma lógica no meu componente de lista ... to perdida

[Anonimo-qjfj]

import React from 'react'
import './estilo.css'

export default function App(){

const Nomes = ['Junior', 'Vitor', 'Antonio']
const NomesMai = Nomes.map((Nomes)=>{
return <><h1>Este Nome em maisculo fica assim:
})

const Nomeslength = Nomes.map((Nomes)=>
<>
<p>Qntd de Letras: {Nomes.length}</p>
</>
)

return(
<>
<h1>Nomes de Teste</h1>
{NomesMai}
<h1>Tamanho dos nomes</h1>
{Nomeslength}
</>
);
}