map
é usado para renderizar dinamicamente um número de elementos com base na entrada do usuário. No entanto, houve uma peça importante que faltava nesse exemplo. Quando você cria uma matriz de elementos, cada um precisa de um atributo- key
definido como um valor exclusivo. O React usa essas chaves para acompanhar quais itens são adicionados, alterados ou removidos. Isso ajuda a tornar o processo de re-renderização mais eficiente quando a lista é modificada de alguma forma. Observe que as chaves precisam ser únicas entre os elementos irmãos, elas não precisam ser globalmente exclusivas em seu aplicativo. Frameworks()
. Frameworks()
precisa mapear a matriz para uma lista não ordenada, como no último desafio. Termine de escrever o retorno de chamada do map
para retornar um elemento li
para cada estrutura na matriz frontEndFrameworks
. Desta vez, certifique-se de atribuir a cada li
um atributo- key
, definido como um valor único. Normalmente, você quer tornar a chave algo que identifique exclusivamente o elemento que está sendo renderizado. Como último recurso, o índice de matriz pode ser usado, mas normalmente você deve tentar usar uma identificação exclusiva. Frameworks
deve existir e renderizar para a página.
testString: 'assert(Enzyme.mount(React.createElement(Frameworks)).find("Frameworks").length === 1, "The Frameworks
component should exist and render to the page.");'
- text: Frameworks
devem renderizar um elemento h1
.
testString: 'assert(Enzyme.mount(React.createElement(Frameworks)).find("h1").length === 1, "Frameworks
should render an h1
element.");'
- text: Frameworks
devem renderizar um elemento ul
.
testString: 'assert(Enzyme.mount(React.createElement(Frameworks)).find("ul").length === 1, "Frameworks
should render a ul
element.");'
- text: A tag ul
deve renderizar 6 elementos li
filhos.
testString: 'assert(Enzyme.mount(React.createElement(Frameworks)).find("ul").children().length === 6 && Enzyme.mount(React.createElement(Frameworks)).find("ul").childAt(0).name() === "li" && Enzyme.mount(React.createElement(Frameworks)).find("li").length === 6, "The ul
tag should render 6 child li
elements.");'
- text: Cada elemento de item de lista deve ter um atributo de key
exclusivo.
testString: 'assert((() => { const ul = Enzyme.mount(React.createElement(Frameworks)).find("ul"); const keys = new Set([ ul.childAt(0).key(), ul.childAt(1).key(), ul.childAt(2).key(), ul.childAt(3).key(), ul.childAt(4).key(), ul.childAt(5).key(), ]); return keys.size === 6; })(), "Each list item element should have a unique key
attribute.");'
```