nao sei mais o que faco para o código parar de dar erro, ta dando erro na hora do criar novo time passar para o input de select do criar jgoador

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;

import { useState } from 'react';
import './Formulario.css';
import CampoTexto from '../campoTexto';
import ListaSuspensa from '../listaSuspensa';
import Botao from '../Botao';



const Formulario = ({ cadastrarTime, aoJogadorCadastrado, aoCriarTime }) => {
    const [timesCriados, setTimesCriados] = useState([]);
    const times = [
        'Duelista',
        'Sentinela',
        'Controlador',
        'Iniciador',
        'Lurker', 
        'Coach'
    ]


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

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

  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={[
            'Duelista',
            'Sentinela',
            'Controlador',
            'Iniciador',
            'Lurker',
            'Coach',
          ]}
          valor={funcao}
          aoAlterado={(valor) => setFuncao(valor)}
        />
        <Botao>Criar Card</Botao>
      </form>

      <form className="formulario" onSubmit={(evento) => {
                evento.preventDefault()
                aoCriarTime({ 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 a cor do time"
          valor={corTime}
          aoAlterado={(valor) => setCorTime(valor)}
        />
        <Botao>Criar novo time</Botao>
      </form>
    </section>
  );
};

export default Formulario;

import Jogador from '../Jogador'
import './Time.css'

const Time = ({ nome, corPrimaria, corSecundaria, jogadores, aoDeletar }) => {
    
const css = { backgroundColor: corSecundaria }
const borda = {borderColor: corPrimaria}

    return(
            jogadores.length >0 && <section className='time' style={css}>
            <h3 style={borda}>{nome}</h3>
            <div className='jogadores'>
                    {jogadores.map((jogador) => {
                    return <Jogador corDeFundo={corPrimaria}  
                    id={jogador.id} key={jogador.nome} 
                    nome={jogador.nome} funcao={jogador.funcao} 
                    imagem={jogador.imagem} aoDeletar={() => 
                    aoDeletar(jogador.id)}
            />
            })}
            </div>
            </section>
    )
}

export default Time

Nao adicionei o mudarCor porque nao gostei muito da ideia

Olá, Santiago, tudo bem?

O erro compartilhado ocorre porque a função aoCriarTime não está sendo passada corretamente como uma propriedade para o componente Formulario. Na função App, você está chamando a propriedade aoJogadorCadastrado ao passar a função aoNovoJogadorAdicionado como valor, mas não está passando a função aoCriarTime para a propriedade correspondente no componente Formulario.

Para corrigir o erro, você precisa adicionar a propriedade aoCriarTime ao chamar o componente Formulario em App.js. Modifique a linha onde você chama o componente Formulario para incluir a propriedade aoCriarTime da seguinte maneira:

<Formulario 
  cadastrarTime={cadastrarTime}
  times={times.map(time => time.nome)} 
  aoJogadorCadastrado={jogador => aoNovoJogadorAdicionado(jogador)}
  aoCriarTime={cadastrarTime} // Adicione esta linha
/>

Com essa alteração, a função cadastrarTime será passada corretamente para a propriedade aoCriarTime no componente Formulario, e o erro não deverá mais ocorrer.

Espero que esta explicação seja útil para resolver o problema com o código.

Se você tiver alguma dúvida adicional, não hesite em perguntar.

Espero ter lhe ajudado, abraços e bons estudos!

Olá, então muito obrigado pela resposta parou de aparecer o erro da tela, amem. porém mesmo assim quando clico em criar time é como se fosse um formulario vazio que n faz nada, nem recarrega a página, literalmente o código só nao aparece no input de select

Olá, Santiago! Tudo ok por aí?

Fico feliz em saber que o erro foi resolvido! Agora, para resolver o problema com o formulário que não está funcionando corretamente, podemos fazer algumas modificações no código.

Parece que o problema está ocorrendo porque o segundo formulário, aquele para criar um novo time, não está chamando a função aoCriarTime corretamente. Vamos corrigir isso juntos:

1. No arquivo Formulario.js, verifique se você está chamando a função aoCriarTime ao enviar o segundo formulário (para criar um novo time). Você deve chamar essa função quando o usuário clicar no botão "Criar novo time". Certifique-se de que o evento onSubmit do formulário esteja chamando a função aoCriarTime passando os valores corretos:

   <form
     className="formulario"
     onSubmit={(evento) => {
       evento.preventDefault();
       aoCriarTime({ nome: nomeTime, cor: corTime });
       setNomeTime(''); // Limpa os campos após criar o time
       setCorTime(''); // Limpa os campos após criar o time
     }}
   >
     {/* Restante do código do formulário */}
   </form>
   

2. Agora, verifique se você está recebendo a propriedade aoCriarTime no componente Formulario ao importá-lo no arquivo App.js. Confirme se a propriedade está sendo passada corretamente como uma prop para o componente Formulario. A chamada deve ser semelhante a esta:

   <Formulario
     cadastrarTime={cadastrarTime}
     times={times.map((time) => time.nome)}
     aoJogadorCadastrado={jogador => aoNovoJogadorAdicionado(jogador)}
     aoCriarTime={cadastrarTime}
   />
   

   Após fazer essas modificações, o formulário para criar um novo time deve funcionar corretamente. Ele não deve mais aparecer vazio e deve chamar a função cadastrarTime para criar o novo time com os valores corretos.

Caso ainda existam problemas ou dúvidas, não hesite em perguntar. Estou aqui para ajudar.

Espero que isso resolva o problema!

Se precisar de mais ajuda, estou à disposição.

Abraços e bons estudos.