Solucionado (ver solução)

Importante

Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!

Solucionado
(ver solução)
4
respostas

retorno de {linhas}

O método map não deve retornar uma nova lista? No exercício esta retornando um elemento Html. porque isso acontece?

const TableBody = props => {
    const linhas = props.autores.map((linha, index) =>{
        return(
            <tr>
                <td>{linha.nome}</td>
                <td>{linha.livro}</td>
                <td>{linha.preco}</td>
                <td><button>Remover</button></td>
            </tr>
        );
    });
    return(
        <tbody>
            {linhas}
        </tbody>
    );
}
4 respostas

Boa Tarde, Felipe. Tudo bem?

Realmente o map tem como objetivo retornar / modificar uma nova lista. Porém ele também é amplamente utilizado para renderizar elementos em arrays dentro do render, seja para tabelas ou itens de listas.

No fundo, ele também está modificando uma lista, mas dentro do render.

Neste tópico tem exemplos com listas e options:

https://stackoverflow.com/questions/38282997/rendering-an-array-map-in-react

https://stackoverflow.com/questions/41374572/how-to-render-an-array-of-objects-in-react

Boa tarde, Felipe! Como vai?

Sim, o map() deve ao final retornar um novo array. E aparentemente o seu código está correto.

No console do navegador ocorre algum erro? Se sim, vc poderia colar o log aqui? Assim ficará mais fácil de entender o que está rolando por baixo dos panos.

Qualquer coisa é só falar!

Grande abraço e bons estudos, meu aluno!

Então é a função render que esta esta convertendo o array gerado pelo map em elemento html?

solução!

Na minha visão é o próprio map, que está retornando para cada item um JSX com os elementos necessários.