Validação

Formulario

import React, { Component } from 'react';
import FormValidator from './FormValidator';


class Formulario extends Component 
{
    constructor(props) {
        super(props);

        //regra de validação dos campos
        this.validador = new FormValidator([
            {
            campo: 'nome',
            metodo: 'isEmpty',
            validoQuando: false,
            mensagem: 'Entre com um nome'
            },
            {
            campo: 'livro',
            metodo: 'isEmpty',
            validoQuando: false,
            mensagem: 'Entre com um Livro'
            },
            {
            campo: 'preco',
            metodo: 'isInt',
            args: [{min: 0, max: 99999}],
            validoQuando: true,
            mensagem: 'Entre com um valor númerico'
            }
        ]);

        this.stateInicial = {
            nome: '',
            livro: '',
            preco: '',
            validacao: this.validador.valido()
        }

        this.state = this.stateInicial;
    }

    submitFormulario = () => {

        const validacao = this.validador.valida(this.state);

        if (validacao.isValid) {
            this.props.escutadorDeSubmit(this.state);
            this.setState(this.stateInicial);
        }else {
            const {nome, livro, preco} = validacao;
            const campos = [nome, livro, preco];

            const camposInvalidos = campos.filter(elem =>{
                return elem.isInvalid;
            });
            camposInvalidos.forEach(console.log);
        }


    }

    escutadorDeInput = event => {
        const { name, value } = event.target;

        this.setState({
            [name]: value
        });
    }



    render() {

        const { nome, livro, preco } = this.state;

        return (
            <form>
                <div className="row">
                    <div className="input-field col s4">
                        <label className="input-field" htmlFor="nome">Nome</label>
                        <input
                            className="validate"
                            id="nome"
                            type="text"
                            name="nome"
                            value={nome}
                            onChange={this.escutadorDeInput}
                        />
                    </div>
                    <div className="input-field col s4">

                        <label className="input-field" htmlFor="livro">Livro</label>
                        <input
                            className="validate"
                            id="livro"
                            type="text"
                            name="livro"
                            value={livro}
                            onChange={this.escutadorDeInput}

                        />
                    </div>

                    <div className="input-field col s4">
                        <label className="input-field" htmlFor="preco">Preço</label>
                        <input
                            className="validate"
                            id="preco"
                            type="text"
                            name="preco"
                            value={preco}
                            onChange={this.escutadorDeInput}

                        />
                    </div>
                </div>

                <button className="waves-effect waves-light indigo lighten-2 btn" onClick={this.submitFormulario} type="button">Salvar
                </button>
            </form>
        );
    }
}

export default Formulario;

FormValidator

import validador from 'validator';

class FormValidator{

    constructor(validacoes){
        this.validacoes = validacoes;
    }

    valida(state) {

        let validacao = this.valido();

        this.validacoes.forEach(regra => {

            const campoValor = state[regra.campo.toString()];
            const args = regra.args || [];

            const metodoValidacao = typeof regra.metodo === 'string' ?
            validador[regra.metodo] : regra.metodo

            if(metodoValidacao(campoValor, ...args, state) !== regra.ValidoQuando){
                validacao[regra.campo] = {
                    isInvalid: true,
                    message: regra.mensagem
                }

                validacao.isValid = false;
            }
        });

        return validacao;

    }

    valido() {
        const validacao = {}

        this.validacoes.map(regra =>(
            validacao[regra.campo] = {isInvalid : false, message: ''}
        ));

        return {isValid: true, ...validacao};
    }


}

export default FormValidator;

já achei o problema

Boa noite! Como vai?

Vc poderia compartilhar conosco o que estava causando o problema e como fez pra resolver? Assim se outros alunos no futuro estiverem na mesma situação poderão encontrar uma luz no seu tópico!

Grande abraço e bons estudos!