Entrar Ainda não tem acesso?
3
respostas

Quando clico em criar times simplesmente nao acontece nada

Referente ao curso React: como os componentes funcionam, no capítulo Criando funcionalidades e atividade Criando um time

por Santiago Oliveira Cunha
| 68.5k xp | 29 posts
import { useState } from 'react';
import Banner from './componentes/Banner';
import Formulario from './componentes/formulario';
import Time from './componentes/Times';
import Rodape from './componentes/Rodape';
import { nanoid } from 'nanoid';



function App() {

  const [times, setTimes] = useState([
    {
      id: nanoid(),
      nome: 'Duelista',
      corPrimaria: '#8B4513',
      corSecundaria: '#F0E68C'
    },
    {
      id: nanoid(),
      nome: 'Sentinela',
      corPrimaria: '#3CB371',
      corSecundaria: '#98FB98'
    },
    {
      id: nanoid(),
      nome: 'Controlador',
      corPrimaria: '#8B4513',
      corSecundaria: '#CD853F'
    },
    {
      id: nanoid(),
      nome: 'Iniciador',
      corPrimaria: '#8B0000',
      corSecundaria: '#FA8072'
    },
    {
      id: nanoid(),
      nome: 'Lurker',
      corPrimaria: '#FFFF00',
      corSecundaria: '#EEE8AA'
    },
    {
      id: nanoid(),
      nome: 'Coach',
      corPrimaria: '#FF8A29',
      corSecundaria: '#B0E0E6'
    },
  
  ]);

  const inicial = [
    {
      id: nanoid(),
      nome: 'Santegas',
      funcao: 'Sentinela',
      imagem: 'https://github.com/Santegas.png',
      time: times[2].nome
    }
  
  ]

  const [jogadores, setJogadores] = useState(inicial)

  function deletarJogador(id) {
    setJogadores(prevJogadores => prevJogadores.filter(jogador => jogador.id !== id));
  }

  const aoNovoJogadorAdicionado = (jogador) =>{
    setJogadores([...jogadores, jogador])
  }

  function cadastrarTime({ nome, cor }) {
    setTimes([...times, { nome, cor, id: nanoid()}])
  }

  return (
    <div className="App">
      <Banner/>
      <Formulario 
        cadastrarTime={cadastrarTime}
        times={times.map(time => time.nome)} 
        aoJogadorCadastrado={jogador => aoNovoJogadorAdicionado(jogador)}
      />
      <section className='times'>
      <h1 className='minhaOrganizacao'>Criador</h1>
      {times.map(time => <Time 
      key={time.id} 
      nome={time.nome} 
      corPrimaria={time.corPrimaria} 
      corSecundaria={time.corSecundaria} 
      jogadores={jogadores.filter(jogador => jogador.funcao === time.nome)}
      aoDeletar={deletarJogador}
      />)}
      </section>
      <Rodape/>
    </div>
    
  );
}

export default App;
3 respostas
por Santiago Oliveira Cunha
| 68.5k xp | 29 posts
import { useState } from 'react';
import './Formulario.css';
import CampoTexto from '../campoTexto';
import ListaSuspensa from '../listaSuspensa';
import Botao from '../Botao';



const Formulario = ({ cadastrarTime, aoJogadorCadastrado}) => {
   

  const [nome, setNome] = useState('');
  const [patente, setPatente] = useState('');
  const [imagem, setImagem] = useState('');
  const [funcao, setFuncao] = useState('');
  const [nomeTime, setNomeTime] = useState('');
  const [corTime, setCorTime] = useState('');

    const times = [
        'Duelista',
        'Sentinela',
        'Controlador',
        'Iniciador',
        'Lurker', 
        'Coach'
    ]

  const aoSalvar = (evento) => {
    evento.preventDefault();
    aoJogadorCadastrado({
      nome,
      patente,
      imagem,
      funcao,
    });
    setNome('');
    setPatente('');
    setImagem('');
    setFuncao('');
  };

  return (
    <section className="formulario">
      <form onSubmit={aoSalvar}>
        <h2>Preencha os dados para criar o card do jogador.</h2>
        <CampoTexto
          obrigatorio={true}
          label="Nome"
          placeholder="Digite seu nome"
          valor={nome}
          aoAlterado={(valor) => setNome(valor)}
        />
        <CampoTexto
          obrigatorio={true}
          label="Patente"
          placeholder="Digite sua patente"
          valor={patente}
          aoAlterado={(valor) => setPatente(valor)}
        />
        <CampoTexto
          label="Imagem"
          placeholder="Informe o endereço da imagem para perfil (pode usar sua URL do GitHub)"
          valor={imagem}
          aoAlterado={(valor) => setImagem(valor)}
        />
        <ListaSuspensa
          label="Função"
          placeholder="Selecione..."
          itens={times}
          valor={funcao}
          aoAlterado={(valor) => setFuncao(valor)}
        />
        <Botao>Criar Card</Botao>
      </form>

      <form className="formulario-Time" onSubmit={(evento) => {
                evento.preventDefault()
                cadastrarTime({ nome:nomeTime, cor:corTime })
            }}>
        <h2>Preencha os dados para criar um novo time.</h2>
                <CampoTexto
                    obrigatorio={true}
                    label='Nome'
                    placeholder='Digite o nome do time'
                    valor={nomeTime}
                    aoAlterado={valor => setNomeTime(valor)}/>
                <CampoTexto
                    obrigatorio={true}
                    label='Cor' 
                    placeholder='Digite sua cor'
                    valor={corTime}
                    aoAlterado={valor => setCorTime(valor)}/>
                <Botao aoClicar={() => cadastrarTime({ nome: nomeTime, cor: corTime })}>
                  Criar novo time
                </Botao>

      </form>
    </section>
  );
};

export default Formulario;
por Santiago Oliveira Cunha
| 68.5k xp | 29 posts

Me ajudem, só quero finalizar esse tópico, nao sei oq faco mais

por GABRIEL DUPLA
| 683.4k xp | 1662 posts
Pessoa Monitora Fórum Ops

Opa Santiago, tudo certo?

Poderia fornecer mais informações sobre o ocorrido? Dessa forma poderei te auxiliar de forma mais assertiva. Quando comenta que não aparece nada quando tenta adicionar os times, aparece alguma mensagem de erro?

Neste caso, peço para verificar como está chamando os arquivos, se está os referenciando no escopo correto e se a ligação entre os componentes está correta.

Outro ponto, é a criação do time, que além do uso no onSubmit também está sendo gerado no botão:

                <Botao aoClicar={() => cadastrarTime({ nome: nomeTime, cor: corTime })}>
                  Criar novo time
                </Botao>

Fico à disposição.

Tenha um bom dia e bons estudos.