Em uma lição anterior, você aprendeu como renderizar uma lista de opções usando o método map() assim:

function FruitList() {
  const fruits = ["Apple", "Banana", "Cherry", "Date"];
  return (
    <ul>
      {fruits.map((fruit, index) => (
        <li key={${fruit}-${index}}>{fruit}</li>
      ))}
    </ul>
  );
}

Lembre-se de que a key deve ser sempre única. Isso ajuda o React a identificar quais itens foram alterados e adicionados ou removidos. Após a primeira option, use uma função arrow para mapear o array powerSourceOptions usando source como parâmetro. Então dentro do método map(), crie um elemento option com uma key de source e um value de source. Por fim, use {source} para exibir o nome de cada fonte de energia no menu suspenso.

Testes:

• Você deve mapear através de `powerSourceOptions`.
• Você deve passar `source` como o parâmetro do map.
• Você deve criar um elemento `option` com uma `key` de `source` e `value` de `source`.
• Você deve ter um total de sete elementos `option`.
• Para os últimos seis elementos `option`, cada conteúdo de texto deve corresponder a uma das opções de fonte de energia do array `powerSourceOptions`.