Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Dúvida] Poderiam me explicar como funciona a função mudarCorDoTime em detalhes?

Poderiam me explicar a função? principalmente a parte do porque escolher o time.nome em vez do time.time, na qual refere ao nome do time

function mudarCorDoTime(cor,nome){ setTimes(times.map(time => { if(time.nome === nome){ time.corSecundaria = cor } return time })) }

1 resposta
solução!

A função "mudarCorDoTime" altera a cor secundária de um time dentro de um array de times. Ela usa "map" para iterar sobre os times e, ao encontrar o time cujo "nome" corresponde ao parâmetro "nome", altera sua propriedade "corSecundaria". A comparação é feita com "time.nome" porque o nome do time está armazenado dessa forma no objeto. Depois, o estado dos times é atualizado com o novo array através de "setTimes".

Exemplo:

import React, { useState } from 'react';

function App() {
  const [times, setTimes] = useState([
    { nome: 'Flamengo', corSecundaria: 'preto' },
    { nome: 'Vasco', corSecundaria: 'azul' },
  ]);

  function mudarCorDoTime(cor, nome) {
    setTimes(times.map(time => {
      if (time.nome === nome) {
        time.corSecundaria = cor;
      }
      return time;
    }));
  }

  return (
    <div>
      <h1>Times de Futebol</h1>
      <button onClick={() => mudarCorDoTime('vermelho', 'Flamengo')}>Mudar cor do Flamengo</button>
      <ul>
        {times.map(time => (
          <li key={time.nome}>
            {time.nome}: {time.corSecundaria}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

Explicação:

→ Temos um estado times com dois times: "Flamengo" e "Vasco", cada um com uma cor secundária.\

→ A função mudarCorDoTime altera a cor do time especificado.

→ Ao clicar no botão "Mudar cor do Flamengo", a cor secundária do Flamengo é alterada para "vermelho".

→ A lista de times é exibida abaixo com suas respectivas cores.

Espero que ajude, bons estudos!