Entrar Ainda não tem acesso?
1
resposta

[Dúvida] Uso do return

Referente ao curso React: desenvolvendo com JavaScript, no capítulo Interagindo com o usuário e atividade Manipulando o input do usuário

por Ketlen Belarmiro Oliveira
| 19.3k xp | 3 posts

Boa pessoal ?!

Então, queria entender porque o return que está sendo usado funciona, mas se retiro, os options somem, me refiro a seguinte linha: return <option key={item}>{item}</option>

Código:

function ListaSuspensa(props) {
    return(
        <div className='lista-suspensa'>
            <label>{props.label}</label>
            <select>{ props.items.map(item => {
                return <option key={item}>{item}</option>
                })}
            </select>
        </div>
    )
}
1 resposta
por Estudante
| 166.2k xp | 579 posts

Boa noite

O motivo pelo qual o return é necessário no seu código está relacionado ao funcionamento da função map(). Essa função cria um novo array, transformando cada item do array original de acordo com a função de callback que você fornece.

No caso específico do seu código:

<select>{ props.items.map(item => {
    return <option key={item}>{item}</option>
    })}
</select>

A função map() espera que a callback retorne um valor (neste caso, um elemento JSX <option>), para que ele seja incluído no novo array. Se você remover o return, a callback não estará retornando nada explicitamente, o que resultaria em undefined para cada iteração. Consequentemente, as <option>s não seriam renderizadas.

Se você preferir uma sintaxe mais enxuta, pode omitir as chaves {} e o return usando uma função de arrow implícita, assim:

<select>{ props.items.map(item => (
    <option key={item}>{item}</option>
))}</select>

Isso funciona porque, ao remover as chaves, a função assume que o retorno é implícito.