[Dúvida] Meu input de cor não desliza

Oi Matheus, tudo bem?

A causa do problema é que você está gerando um novo ID aleatório para cada renderização do componente Time usando uuidv4() na propriedade key. Isso faz com que o componente seja recriado a cada renderização, resultando na perda do estado do input de cor.

Para corrigir o problema, você pode definir uma chave única para cada componente Time fora do loop map e usar essa chave para o atributo key. Dessa forma, o componente Time será reutilizado corretamente e o estado do input de cor será preservado.

O código atualizado Time.js:

import React from 'react';
import Membro from '../Membro';
import './Time.css';
import hexToRgba from 'hex-to-rgba';

const Time = (props) => {
  const atualizaMembros = (nomeRecebido) => {
    props.aoRemover(nomeRecebido);
  };

  return props.membros.length > 0 ? (
    <section
      className="time"
      style={{
        backgroundImage: "url(/imagens/fundo.png)",
        backgroundColor: hexToRgba(props.cor, 0.4),
      }}
    >
      <input
        value={props.cor}
        type="color"
        className="input-cor"
        onChange={(e) => {
          props.mudarCor(e.target.value, props.id);
        }}
      />

      <h3 style={{ borderColor: props.cor }}>{props.nome}</h3>
      <div className="membros">
        {props.membros.map((membro) => (
          <Membro
            key={membro.nome} // Usando nome como chave única para cada membro
            corFundo={props.cor}
            nome={membro.nome}
            imagem={membro.imagem}
            cargo={membro.cargo}
            removeMembro={(nome) => atualizaMembros(nome)}
          />
        ))}
      </div>
    </section>
  ) : null;
};

export default Time;

App.js atualizado:

import React, { useState } from 'react';
import Banner from './componentes/Banner';
import Formulario from './componentes/Formulario';
import Time from './componentes/Time';
import Rodape from './componentes/Rodape';
import { v4 as uuidv4 } from 'uuid';

function App() {
  const [membros, setMembros] = useState(JSON.parse(localStorage.getItem('Membros')) || []);

  const [times, setTimes] = useState([
    {
      id: uuidv4(),
      nome: 'Time dois',
      cor: '#E8F8FF',
    },
    {
      id: uuidv4(),
      nome: 'Time três',
      cor: '#F0F8E2',
    },
    {
      id: uuidv4(),
      nome: 'Time quatro',
      cor: '#FDE7E8',
    },
    {
      id: uuidv4(),
      nome: 'Time cinco',
      cor: '#FAE9F5',
    },
    {
      id: uuidv4(),
      nome: 'Time seis',
      cor: '#FFF5D9',
    },
    {
      id: uuidv4(),
      nome: 'Time sete',
      cor: '#FFEEDF',
    },
  ]);

  const aoMembroAdicionado = (membro) => {
    setMembros((prev) => [...prev, membro]);
    localStorage.setItem('Membros', JSON.stringify([...membros, membro]));
  };

  const aoRemover = (nome) => {
    const arr = membros.filter((membro) => membro.nome !== nome);
    setMembros(arr);
    localStorage.setItem('Membros', JSON.stringify(arr));
  };

  function mudaCorTime(cor, id) {
    setTimes(
      times.map((time) => {
        if (time.id === id) {
          return { ...time, cor: cor };
        }
        return time;
      })
    );
  }

  return (
    <div className="App">
      <Banner />
      <Formulario times={times.map((time) => time.nome)} aoAdicionar={(membro) => aoMembroAdicionado(membro)} />
      {times.map((time) => {
        const key = time.id; // Definindo uma chave única para cada componente Time
        return (
          <Time
            key={key}
            nome={time.nome}
            id={time.id}
            mudarCor={(cor, id) => mudaCorTime(cor, id)}
            corPrimaria={time.corPrimaria}
            cor={time.cor}
            membros={membros.filter((membro) => membro.time === time.nome)}
            aoRemover={(nome) => aoRemover(nome)}
          />
        );
      })}
      <Rodape />
    </div>
  );
}

export default App;

Com essa alteração, o estado do input de cor será preservado e você poderá arrastar a bolinha.

Você pode ver funcionando aqui.

Um abraço e bons estudos.

Bom dia Lorena,

Muuito obrigado, agora resolveu!