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!