Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Tela Branca na execução do APP React

por RODRIGO DE SOUZA LOPES
| 45.7k xp | 11 posts
Auxiliar de TI

Bom dia, poderiam me ajudar? O meu console não apitou nenhum erro, porém a aplicação fica com a tela toda branca, segue os códigos.

import Banner from './components/Banner/Banner.js';
import Formulario from './components/Form/Formulario.js';


function App() {
  return (

    <>
    <Banner/>
    <Formulario/>
    </>

  );
}

export default App;

import './TextInput.css';

const TextInput = (props) => {
    const placeholderModificada = `${props.placeholder}...`

    let valor = ' '

    const aoDigitado = (evento) =>{
        valor = evento.target.value
        console.log(valor)
    }
    return (
        <div className="campo-texto">
            <label>{props.label}</label>
            <input onChange={aoDigitado()} required={props.obrigatorio} placeholder={placeholderModificada} />
        </div>
    )
}

export default TextInput;
import './DropdownList.css';

const Dropdownlist = (props) => {
    return (
        <div>
            <label class="dropdown-list">
                {props.label}
                <select required={props.required}>
                    {props.itens.map(item => {
                        return <option>{item}</option>
                    })}
                </select>
            </label>
        </div>
    )
}


export default Dropdownlist;
3 respostas
por Diogo Santos
| 204.2k xp | 76 posts
Especialista em Operações Portuárias

Parece que há algum problema na sua função aoDigitado. No seguinte trecho de código:

const aoDigitado = (evento) =>{
    valor = evento.target.value
    console.log(valor)
}

Você está passando a função aoDigitado como o valor para o atributo onChange da tag input. Isso está causando um loop infinito e provavelmente está fazendo com que a aplicação trave.

Para resolver esse problema, basta remover os parênteses após o nome da função, ficando assim:

<input onChange={aoDigitado} required={props.obrigatorio} placeholder={placeholderModificada} />

Isso irá garantir que a função seja chamada apenas quando o evento onChange for acionado, e não quando o componente é renderizado.

por RODRIGO DE SOUZA LOPES
| 45.7k xp | 11 posts
Auxiliar de TI

Sigo com o mesmo erro.

solução!
por RODRIGO DE SOUZA LOPES
| 45.7k xp | 11 posts
Auxiliar de TI

AJustei, fiz a declarativa de um alert na função, já que a mesma estava retornando como null

import './Formulario.css';
import TextInput from '../TextInput/TextInput';
import Dropdownlist from '../DropdownList/DropdownList';
import Button from '../Button/Button';


const Formulario = () => {
    const cortes = [
        'Cabelo',
        'Barba',
        'Infantil',
        'Cabelo + Barba',
        'Platinado'
    ]

    const aoSalvar = (evento) => {
        evento.preventDefault()
        alert('Formulário enviado')
    }

    return (
        <section className="formulario">
            <form onSubmit={aoSalvar}>
                <h2>Digite suas informações para o corte</h2>
                <TextInput obrigatorio={true} label="Nome" placeholder="Digite seu nome"/>
                <TextInput obrigatorio={true} label="Preço" placeholder="Digite o preço do corte"/>
                <TextInput obrigatorio={true} label="Barbeiro" placeholder="Selecione o seu barbeiro"/>
                <Dropdownlist obrigatorio={true} label ="Selecione o tipo de corte" itens ={cortes}/>
                <Button>
                    Agendar
                </Button>
            </form>
        </section>
    )
}

export default Formulario