Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

151
Vistas
How to set a particular state of a parent component from child component in React?

I'm new to React. I'm trying to do simple validation of a form elements. I'm stuck at validating input data and setting the 'name_error' state as the error msg inside <p> tag. Leaving my code below

// 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;
    }
}

Please suggest an idea to set name_error as 'Please enter any name' or 'Use only letters in this field' when user enters wrong input

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

State should be like this,

constructor(props){
 super(props);
 this.state = {
    show: false,
    name: "",
    name_error: ""
  }
}

And Also the update state using callback. It would be helpful,

this.setState({[name] : value},() =>{console.log(this.state)})
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda