Como deletar um colaborador sem ter os colaboradores estáticos

O código do index.js do Colaborador ta assim:

import { BsFillTrash3Fill } from 'react-icons/bs'
import './Colaborador.css'

const Colaborador = ({nome, imagem, cargo, corDeFundo, aoDeletar}) => {
    return (
        <div className='colaborador'>
            <BsFillTrash3Fill className='deletar' onClick={aoDeletar} />
            <div className='cabecalho' style={{backgroundColor: corDeFundo}}>
                <img src={imagem} alt={nome} />
            </div>
            <div className='rodape'>
                <h4>{nome}</h4>
                <h5>{cargo}</h5>
            </div>
        </div>
    )
}

export default Colaborador

E do time assim:

import Colaborador from '../Colaborador'
import './Time.css'

const Time = (props, aoDeletar) => {

    return (
        props.colaboradores.length > 0 && <section className='time' style={{backgroundColor: props.corSecundaria}}>
            <h3 style={{borderColor: props.corPrimaria}}>{props.nome}</h3>
            <div className='colaboradores'>
            {props.colaboradores.map(colaborador => {
                
                return <Colaborador 
                corDeFundo={props.corPrimaria}
                key={colaborador.nome}
                nome={colaborador.nome} cargo={colaborador.cargo} 
                imagem={colaborador.imagem}
                aoDeletar={aoDeletar}/>
            })}
            </div>
        </section>
    )
    
}

export default Time

Olá, Maíra! Como vai?

Vamos lá, eu percebi que você concluiu um curso de React onde é construido um Organograma, ou seja, o projeto da Organo da Alura, mas esse projeto é evoluído no curso onde você está agora, e nesse curso já é ensinado como fazer isso nessa aula aqui:

• Deletando um colaborador.

Que inclusive é a aula de onde você iniciou o tópico, então eu gostaria de perguntar se você não entendeu algo que instrutor passou na video aula? Ou então se o que ele passou não funcionou para você.

Se você tiver alguma dúvida pontual sobre a aula é só perguntar, ficarei muito feliz em sanar suas dúvidas! Então se precisar é só falar.

Ah e outra coisa, o seu código me parece um pouco incompleto, pois nessa altura do curso eu creio que já tinham sido feitam algumas implementações no projeto da Organo, mas o código que você mandou parece o do Curso 1, o do Paulo Silveira e o Vinicios Neves.

Você poderia só dar um breve contexto para que eu possa só entender em que momento você está do curso?

Olá! Obrigada pela resposta. Sim, porque na verdade eu fiz o código do curso 1, e não coloquei os colaboradores estáticos como está agora no curso 2. Porque na verdade minha intenção é justamente que não tenham os colaboradores no código, apenas quando coloca no formulário. E aí eu queria saber como faz pra apagar ele depois de colocado no formulário. Estou nessa aula mesmo, fazendo as outras implementações, menos essa com os colaboradores já no código.

Oi Maíra, tudo bem contigo?

Peço desculpas pela demora em dar um retorno.

Bom vamos lá, primeira mudança que será necessária é ter o React icons e o UUID, para ter eles é só usar isso em seu terminal:

npm install react-icons --save
npm i uuid

Assim você tem as "extensões" necessárias.

Após isso entre no arquivo index.js da pasta de Colaborador. E adicione o icone de "lixo" e estilize ele no colaborador.css como passado na aula. Para para a const colaborador as props "aoDeletar" e "colaborador". E na tag do icone adicione a propriedade onclick com uma arrow function chamando aoDeletar passando colaborador.id, algo assim: onClick={() => aoDeletar(colaborador.id)}. Ao final você deve ter algo assim:

        <BsFillTrash3Fill size={25} className="deletar" onClick={() => aoDeletar(colaborador.id)} />

Depois de estilizar o ícone, abra o index.js da pasta Time. Então adicione uma const que define o que será o aoDeletar, algo assim:

const handleDelete = (colaboradorId, index) => {
        props.aoDeletar(colaboradorId, index);
    };

Agora faça a transformação da arrow function da parte do colaboradores.map. E lá adicione a prop aoDeletar e a prop colaborador. Dessa forma:

<div className='colaboradores'>
                    {props.colaboradores.map((colaborador, index) => (
                        <Colaborador
                            nome={colaborador.nome}
                            cargo={colaborador.cargo}
                            imagem={colaborador.imagem}
                            key={colaborador.nome}
                            corDeFundo={props.corPrimaria}
                            aoDeletar={() => handleDelete(colaborador.id, index)}
                            colaborador={colaborador}
                        />
                    )
                    )}
                </div>

Após isso só precisamos ir ao arquivo App.js e fazer a última parte. Primeiro adicione o import do uuid, dessa forma: import { v4 as uuidv4 } from "uuid";, feito isso nós vamos mudar o nome da const times para time no singular. E dentro dela vamos adicionar um item, aos objetos JS, dessa forma aqui:

const time = [
    {
      id: uuidv4(),
      nome: 'Programação',
      corPrimaria: '#57C278',
      corSecundaria: '#D9F7E9'
    },
    {
      id: uuidv4(),
      nome: 'Front-End',
      corPrimaria: '#82CFFA',
      corSecundaria: '#E8F8FF'
    },
    {
      id: uuidv4(),
      nome: 'Data Science',
      corPrimaria: '#A6D157',
      corSecundaria: '#F0F8E2'
    },
    {
      id: uuidv4(),
      nome: 'Devops',
      corPrimaria: '#E06B69',
      corSecundaria: '#FDE7E8'
    },
    {
      id: uuidv4(),
      nome: 'UX e Design',
      corPrimaria: '#DB6EBF',
      corSecundaria: '#FAE9F5'
    },
    {
      id: uuidv4(),
      nome: 'Mobile',
      corPrimaria: '#FFBA05',
      corSecundaria: '#FFF5D9'
    },
    {
      id: uuidv4(),
      nome: 'Inovação e Gestão',
      corPrimaria: '#FF8A29',
      corSecundaria: '#FFEEDF'
    },
    {
      id: uuidv4(),
      nome: 'Inteligência Artificial',
      corPrimaria: '#7b71ff',
      corSecundaria: '#d8d5ff'
    }
  ]

Feito isso teremos vários erros, mas vamos com calma. Agora vamos adicionar uma const dentro de da const aoNovoColadoradorAdicionado, para criar um id para cada novo colaborador.

Dessa forma aqui:

const aoNovoColadoradorAdicionado = (colaborador) => {
    const novoColaborador = { ...colaborador, id: uuidv4() };
    setColaboradores([...colaboradores, novoColaborador]);
  }

Agora vamos adicionar a lógica para deletar os colaboradores, para isso crie uma constante de nome deletarColaborador e passe o método filter para ela, algo como feito na aula, dessa forma aqui:

function deletarColaborador(colaboradorId) {
    setColaboradores(prevColaboradores => prevColaboradores.filter(colaborador => colaborador.id !== colaboradorId));
  }

E por fim passe o times.map para time.map no singular.

E era isso, dessa forma você deve conseguir fazer tudo certinho.

Eu vou colocar o código das 3 pastas abaixo pra ti.

Mas só pra mostrar funcionando, eu vou deixar um gif mostrando eu criando cards aleatórios e apagando eles tá.

E como prometido, aqui os arquivos com os códigos completos:

• index.js da pasta Colaborador:

import './Colaborador.css';
import { BsFillTrash3Fill } from 'react-icons/bs'

const Colaborador = ({ nome, imagem, cargo, corDeFundo, aoDeletar, colaborador }) => {

    const cssCabecalho = {
        backgroundColor: corDeFundo
    }

    return (<div className='colaborador'>
        <BsFillTrash3Fill size={25} className="deletar" onClick={() => aoDeletar(colaborador.id)} />
        <div className='cabecalho' style={ cssCabecalho }>
            <img src={imagem} alt={nome} />
        </div>
        <div className='rodape'>
            <h4>{nome}</h4>
            <h5>{cargo}</h5>
        </div>
    </div>);
}

export default Colaborador;

• index.js da pasta Time:

import Colaborador from '../Colaborador';
import './Time.css'

const Time = (props) => {
    const css = {
        backgroundColor: props.corSecundaria
    }

    const cssAside = {
        backgroundColor: props.corPrimaria
    }

    const handleDelete = (colaboradorId, index) => {
        props.aoDeletar(colaboradorId, index);
    };

    return (
        props.colaboradores.length > 0 && <>
            {/* <h1 className="titulo-times-section">Minha Organização:</h1>
            <aside></aside> */}
            <section className='time' style={css}>
                <h3>{props.nome}</h3>
                <aside style={cssAside}></aside>
                <div className='colaboradores'>
                    {props.colaboradores.map((colaborador, index) => (
                        <Colaborador
                            nome={colaborador.nome}
                            cargo={colaborador.cargo}
                            imagem={colaborador.imagem}
                            key={colaborador.nome}
                            corDeFundo={props.corPrimaria}
                            aoDeletar={() => handleDelete(colaborador.id, index)}
                            colaborador={colaborador}
                        />
                    )
                    )}
                </div>
            </section>
        </>
    );
}

export default Time;

• App.js:

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

function App() {

  const time = [
    {
      id: uuidv4(),
      nome: 'Programação',
      corPrimaria: '#57C278',
      corSecundaria: '#D9F7E9'
    },
    {
      id: uuidv4(),
      nome: 'Front-End',
      corPrimaria: '#82CFFA',
      corSecundaria: '#E8F8FF'
    },
    {
      id: uuidv4(),
      nome: 'Data Science',
      corPrimaria: '#A6D157',
      corSecundaria: '#F0F8E2'
    },
    {
      id: uuidv4(),
      nome: 'Devops',
      corPrimaria: '#E06B69',
      corSecundaria: '#FDE7E8'
    },
    {
      id: uuidv4(),
      nome: 'UX e Design',
      corPrimaria: '#DB6EBF',
      corSecundaria: '#FAE9F5'
    },
    {
      id: uuidv4(),
      nome: 'Mobile',
      corPrimaria: '#FFBA05',
      corSecundaria: '#FFF5D9'
    },
    {
      id: uuidv4(),
      nome: 'Inovação e Gestão',
      corPrimaria: '#FF8A29',
      corSecundaria: '#FFEEDF'
    },
    {
      id: uuidv4(),
      nome: 'Inteligência Artificial',
      corPrimaria: '#7b71ff',
      corSecundaria: '#d8d5ff'
    }
  ];

  const [colaboradores, setColaboradores] = useState([]);

  const aoNovoColadoradorAdicionado = (colaborador) => {
    const novoColaborador = { ...colaborador, id: uuidv4() };
    setColaboradores([...colaboradores, novoColaborador]);
  }

  function deletarColaborador(colaboradorId) {
    setColaboradores(prevColaboradores => prevColaboradores.filter(colaborador => colaborador.id !== colaboradorId));
  }

  return (
    <div className="App">
      <Banner />
      <Formulario times={time.map(time => time.nome)} aoColaboradorCadastrado={colaborador => aoNovoColadoradorAdicionado(colaborador)}/>
      {time.map(time => <Time 
        key={time.nome} 
        nome={time.nome} 
        corPrimaria={time.corPrimaria} 
        corSecundaria={time.corSecundaria}
        colaboradores={colaboradores.filter(colaborador => colaborador.time === time.nome)}
        aoDeletar={deletarColaborador}
      />)}
      <Rodape />
    </div>
  );
}

export default App;

No geral era isso, case precise eu estarei aqui.

Se não entender algo é só falar.

Abraços e bons estudos.

Nossa Renan! Arrasou muito! Muito obrigada! Entendi sim, o negócio é que precisa ter um id pra cada colaborador né? Ótimo! Valeu! =D

Fico feliz que você gostou.

Isso mesmo, tendo o id ele consegue encontrar o card e pode eliminar ele sem problemas.

Caso precise é só chamar. Valeu e boa sorte aí.