Soy nuevo en Reaccionar. Estoy tratando de hacer una validación simple de los elementos de un formulario. Estoy atascado en la validación de los datos de entrada y la configuración del estado 'name_error' como el mensaje de error dentro de la etiqueta <p> . Dejando mi código a continuación

 // App.js import React, { Component } from 'react'; import ValidateName from './component/validation'; import Modal from './modal'; class Home extends Component { state = { show: false, name: "", name_error: "" } handleChanges = (e) => { const name = e.target.name; const value = e.target.value; this.setState({[name] : value}) } render() { console.log(this) return ( <div> <div className='Main'> {/* < Main /> */} <button id='add' onClick={()=>{this.setState({show: true})}}>Add</button> </div> {this.state.show && <Modal> <form> <div className='modalContainer'> <b className='title'>Register</b> <button id='xmark' onClick={()=>{this.setState({show: false})}} >&times;</button> <label for='name' >Name</label><br /> <input type="text" id='name' placeholder='Enter your name here' name="name" onChange={this.handleChanges}/><br /> < ValidateName content={this.state.name} /> <button type='submit'>Sign Up</button> <button>Cancel</button> </div> </form> </Modal>} </div> ); } } export default Home; // Modal.js import React, { Component } from 'react'; class Modal extends Component { render() { return ( <div> {this.props.children} </div> ); } } export default Modal; //validation.js class ValidateName extends Component { err1 ='Please enter any name'; err2 = 'Use only letters in this field'; render() { const ren = this.props.content.length === 0 ? (<p>{this.err1}</p> ) : (this.props.content.match(/[a-zA-Z]+$/) ? '' : <p>{this.err2}</p>) return ren; } }

Sugiera una idea para configurar name_error como ' Ingrese cualquier nombre ' o ' Usar solo letras en este campo ' cuando el usuario ingrese una entrada incorrecta