[Bug] Deleta todos os novos colaboradores por falta de ID | [Sugestão] Cor aleatória para novos times

Quando criamos um novo colaborador, esse não está puxando uma nova id, isso gera um bug ao tentar deletar um colaborador novo de um time novo que tenha mais de um colaborador, apagando todos os colaboradores sem id em vez de somente o selecionado.

**Para solucionar no index.js de formulário inserir o parâmetro "id: uuidv4()," **

Trecho do código corrigido:

const aoSubmeter = (evento) => {
        evento.preventDefault()
        aoCadastrar({
            nome,
            cargo,
            imagem,
            time,
            id: uuidv4(),
        })

é importante fazer o import do uuid no mesmo arquivo para funcionar:

import { v4 as uuidv4 } from 'uuid';

Com isso o arquivo index.js do componente formulário ficou assim:

import { useState } from 'react'
import Botao from '../Botao'
import Campo from '../Campo'
import ListaSuspensa from '../ListaSuspensa'
import './Formulario.css'
import { v4 as uuidv4 } from 'uuid';

const Formulario = ({ aoCadastrar, times, cadastrarTime }) => {

    const [nome, setNome] = useState('')
    const [cargo, setCargo] = useState('')
    const [imagem, setImagem] = useState('')
    const [time, setTime] = useState('')
    const [nomeTime, setNomeTime] = useState('')
    const genRanHex = size => [...Array(size)].map(() => Math.floor(Math.random() * 16).toString(16)).join('')
    const [corTime, setCorTime] = useState(`#${genRanHex(6)}`)    

    const aoSubmeter = (evento) => {
        evento.preventDefault()
        aoCadastrar({
            nome,
            cargo,
            imagem,
            time,
            id: uuidv4(),
        })

        setNome('')
        setCargo('')
        setImagem('')
        setTime('')
    }

    return (
        <section className="formulario-container">
            {/* Novo Colaborador */}
            <form className="formulario" onSubmit={aoSubmeter}>
                <h2>Preencha os dados para criar o card do colaborador.</h2>
                <Campo
                    obrigatorio={true}
                    label='Nome'
                    placeholder='Digite seu nome'
                    valor={nome}
                    aoAlterado={valor => setNome(valor)} />
                <Campo
                    obrigatorio={true}
                    label='Cargo'
                    placeholder='Digite seu cargo'
                    valor={cargo}
                    aoAlterado={valor => setCargo(valor)} />
                <Campo
                    label='Imagem'
                    placeholder='Informe o endereço da imagem'
                    valor={imagem}
                    aoAlterado={valor => setImagem(valor)} />
                <ListaSuspensa
                    obrigatorio={true}
                    label='Times'
                    items={times}
                    valor={time}
                    aoAlterado={valor => setTime(valor)} />
                <Botao texto='Criar card' />
            </form>
            {/* Novo Time */}
            <form className="formulario" onSubmit={(evento) => {
                evento.preventDefault()
                cadastrarTime({ nome: nomeTime, cor: corTime })
                setNomeTime('')
                setCorTime(`#${genRanHex(6)}`)
            }}>
                <h2>Preencha os dados para criar um novo time.</h2>
                <Campo
                    obrigatorio
                    label='Nome'
                    placeholder='Digite o nome do time'
                    valor={nomeTime}
                    aoAlterado={valor => setNomeTime(valor)} />
                <Campo
                    obrigatorio
                    type='color'
                    label='Cor'
                    valor={corTime}
                    aoAlterado={valor => setCorTime(valor)} />
                <Botao texto='Criar novo time' />
            </form>
        </section>
    )
}

export default Formulario

Para mais detalhes e sugestão de como gerar automaticamente novas cores para novos times:

GitHub: github.com/arielspencer/organo

Deploy: organo.arielspencer.com.br