Resumo da Transcrição

Agora que a gente lhe deu com o estilo, é hora de pensarmos como a gente vai injetar os dados para que cada item apareça com os dados corretos e correspondentes quando a gente faz uma busca. Se você olhar aqui no Image List Item, Componente, a gente vai receber os dados desse item específico via as propriedades que serão dadas. Então dentro dessa prop a gente vai ter uma propriedade que vai ter os dados do item. Por exemplo, se eu chamar propriedade de item, então a gente vai se referir por exemplo item e o URL da imagem e tem descrição. Como eu estou usando um componente funcional, não preciso da palavra chave dessa. Então isso que a gente quer que apareça aqui. Então para isso acontecer a gente tem que ir para Image List e que a gente vai dar propriedade item com alguma coisa, que um item que será passado com propriedade a esse componente e vai estar dentro dessa variável, acumento. E a gente vai ter acesso. E em vez de ter no aqui a gente vai usar item, por exemplo, o URL e item descrição. Como se fosse assim. Mas é claro que agora ainda não tem. Então vamos mover isso e voltar aqui para Image List. A gente tem que passar o item. Mas como a gente vai passar esse item? Bem a gente tem que ir para o index aqui, porque o index vai ser responsável. Essa esse componente aqui vai ser responsável por fazer o pedido ao servidor API e receber como resposta os dados e a gente vai injetar os dados aqui nesse componente Image List. Por exemplo a gente põe itens com os dados para ser injetados que vão ser passados como prop para o Image List. E aqui se a gente quiser passar o item específico a gente vai fazer um loop e vai para cada item dessa talvez um array dessa coletanner a gente vai passar como dados propriedade item para o Image List. Então vamos começar aqui e eu vou fazer é só fazer primeiro eu vou passar uns itens não do servidor mas só criar aqui no index um variável chamado itens eu posso fazer um array aqui coletâneo aqui e cada item é um objeto por exemplo eu vou botar um ID e vou botar por exemplo o URL deixa eu pegar um URL da web aqui eu fui no Google e pesquisei imagem de cachorro cachorro eu gostei dessa e usa a HTTPS não se esqueça o react needed se você não tiver uma imagem sem HTTPS não vai funcionar então dá um detalhe pegue a HTTPS copy essa URL eu só vou botar aqui e o outro vai ser a descrição pode ser qualquer coisa. E vou botar outros os só copy a is muda o ID. E muda umas descrições se você quiser passa seu próprio dados falsos aí. Digitei certo não sei lá. Eu botei cinco itens SRA então vamos pegar esses itens e passar com propriedades para o Image List aqui. E o Image List será dada a propriedade itens e itens que vai poderá ser acessado do this props. Cada um coletâneo de objetos então o que a gente vai fazer aqui no render é em vez de botar esses caras aqui a gente vai fazer um map vamos primeiro pegar os itens e extrair das props se eu digitar isso eu estou pegando os itens é a mesma coisa de digitar isso aqui é a nova maneira do IS6. Então eu só faço assim para pegar os itens que foram dados como props e a gente vai dar um map. Vamos fazer. Pode chamar de que quiser eu vou dar um map no item aqui bom e primeiro o argumento da função aqui de flash. Vai ser o item. O que eu vou fazer vou retornar uma image list item vou construir esse cara usando os dados desse item e o que eu vou fazer é passar o item item com a propriedade item é o item aqui que foi passado. Lembre-se que esse item vai ser um objeto esse objeto aqui por exemplo. Isso vai criar um array uma coletânea array. E você pode só fazer assim. List item que o react native já reconhece que você tem uma coletânea e vai mostrar todos os itens. Vamos ver o que acontece. Só checar aqui se eu estou usando a propriedade quando eu passo a propriedade item eu tenho que usar. Então aqui vai passar.