Hi, I'm new to this React
but I have a question with the parameters, I just want to print name and age as soon as it input
changes state, entering the age in the second input
modifies the name and not the age, why does this happen to me? Or how can I add the second parameter to the Header
.
I would like something similar to this:
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>);
}
}
In the Message component you are defining 2 times state! And also you are not passing the age to the Header.
This would be more valid:
Or directly pass the entire state object to the child