0

Hola soy nuevo en esto de React pero tengo una duda con los parámetros, solo quiero quiero imprimir nombre y edad en cuanto el input cambie de estado, al ingresar la edad en el segundo input modifica el nombre y no la edad, porque me sucede esto ? O como puedo agregar el segundo parámetro al Header.

Quisiera algo parecido a esto:

introducir la descripción de la imagen aquí

class Mensaje extends React.Component {
  constructor (props) {
  super(props);
  this.state = {name: ''}; this.state = {edad:''};
  this.cambioNombre = this.cambioNombre.bind(this);
  this.cambioEdad = this.cambioEdad.bind(this);
  }
  cambioNombre(name) {this.setState({name}); }
  cambioEdad(edad) {this.setState({edad}); }
    render () { return ( <div>
        <Header name={this.state.name} />
       <Input cambioNombre={this.cambioNombre} cambioEdad={this.cambioEdad}/>
   </div> );
  }
}
const Header = (props) => {
  return(
    <div className="hi">
      <h3>Hello, {props.name || "visitor"}, tu edad es {props.edad || "100 años"}!</h3>
    </div>
  );   
}
class Input extends React.Component {
    constructor() {super(); this.state = {input:''} }
  nombreChange(e) {const name = e.target.value;
    this.setState({input:name});
    this.props.cambioNombre(name); }


  render() {
    return(<div>

      <input placeholder='introduce tu nombre' type='text'
      name={this.state.name} onChange={this.nombreChange.bind(this)}>
      </input>
      <br></br>
      <input placeholder='introduce tu edad' type='text'
      name={this.state.name} onChange={this.nombreChange.bind(this)}>
      </input>

    </div>);
  }
}

1 respuesta 1

2

En el componente Mensaje estás defininiendo 2 veces state! Y además tampoco estas pasando la edad al Header.

Esto sería más válido:

constructor (props) {
  super(props);
  this.state = {
    name: '', 
    edad: ''
  };

  this.cambioNombre = this.cambioNombre.bind(this);
  this.cambioEdad = this.cambioEdad.bind(this);
}

render() { 
  return (
    <div>
      <Header name={this.state.name} edad={this.state.edad} />
      <Input cambioNombre={this.cambioNombre} cambioEdad={this.cambioEdad}/>
    </div> 
  );
}

O directamente pasas todo el objecto state al hijo

<Header info={this.state} />

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.