A volta às aulas na Geek Codes subiu de nível. Este não é apenas um exercício, é a sua chance de conquistar o primeiro selo de distinção de 2026.

O Desafio: Você deve construir um componente de formulário em React que simule o cadastro de um “Mentor da Comunidade”.

• Requisito 1: Validação de E-mail (não pode enviar sem o @).
• Requisito 2: Contador de caracteres na Bio (limite de 100).
• Requisito 3: Renderização Condicional (o botão de “Enviar” só aparece se todos os campos estiverem preenchidos).

Como Participar:

1. Copie o seu código e cole no nosso Fórum, criando um tópico ou respondendo ao post oficial com o título: [Missão Geek Reload] Sua Solução.
2. Nossa equipe avaliará a lógica e a limpeza do código.

A Recompensa: Os vencedores receberão o emblema Pioneiro do Reload diretamente em seus perfis de usuário!

Código Base para Estudo:

JavaScript

// Use este esqueleto para começar seu projeto
import { useState } from 'react';

export default function FormularioMestre() {
  const [email, setEmail] = useState('');
  const [erro, setErro] = useState('');

  const validarEmail = (valor) => {
    setEmail(valor);
    if (!valor.includes('@')) {
      setErro('E-mail inválido, Builder!');
    } else {
      setErro('');
    }
  };

  return (
    <div className="p-8">
      <h2>🔨 Construa sua Validação</h2>
      <input 
        type="email" 
        onChange={(e) => validarEmail(e.target.value)} 
        placeholder="Seu melhor e-mail"
      />
      {erro && <span style={{color: 'red'}}>{erro}</span>}
      {/* Continue o desafio daqui... */}
    </div>
  );
}