Reactjs pass variables from one component to another - reactjs

Question

I have a component like this:
class LoginPage extends React.Component{
constructor(props) {
super(props);
this.state = {submit:''};
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(e) {
alert('username and password were submitted: ' + this.props.userName + ' and ' + this.props.password);
e.prevenDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<GetUsername/>
<GetPassword/>
<button type="submit">Login</button>
</form>
)
}
}
The GetUsername and GetPassword components get username and password from user input. My question is that is there anyway I can pass the username and password from these 2 components to the handleSubmit method of the LoginPage component above, so the alert pops up can show correctly?

Answer 1

To achieve what you are looking for, you would need the login form to have its own state which would include the username and password. It would have instance methods that would update those fields. It would pass those functions down to the relevant child components and whenever they change they would call this.props.onChange with the appropriate value. The parent component would then update its appropriate state. Here is an example.
class LoginPage extends React.Component{
constructor(props) {
super(props);
this.state = {
submit:'',
password: '',
userName: ''
};
this.handleSubmit = this.handleSubmit.bind(this);
this.onUserNameChange = this.onUserNameChange.bind(this);
this.onPasswordChange = this.onPasswordChange.bind(this);
}
onUserNameChange(userName) {
this.setState({
userName: userName
})
}
onPasswordChange(password) {
this.setState({
password: password
})
}
handleSubmit(e) {
alert('username and password were submitted: ' + this.state.userName + ' and ' + this.state.password);
e.prevenDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<GetUsername onChange={onUserNameChange}/>
<GetPassword onChange={onPasswordChange}/>
<button type="submit">Login</button>
</form>
)
}
}
this may require some tweaking and as stated before you would need to make sure that you are ingesting the this.props.onChange appropriately in your GetUsername and GetPassword components so they call that function and pass the appropriate argument in.

Answer 2

You need to make username and password part of the state of your LoginPage component, and update the state whenever the input changes. You do this by having an inputChanged function defined on LoginPage which is passed as a prop to your GetUsername and GetPassword components.
class LoginPage extends React.Component {
constructor() {
super();
this.state = {
username: '',
password: ''
};
}
handleSubmit(e) {
e.prevenDefault();
alert('username and password were submitted: ' + this.state.userName + ' and ' + this.state.password);
}
handleInputChange(name, value) {
this.setState({
[name]: value
});
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<GetUsername onChange={newValue => this.handleInputChange('username', newValue)} />
<GetPassword onChange={newValue => this.handleInputChange('password', newValue)} />
<button type="submit">Login</button>
</form>
)
}
Then e.g.
const GetUsername = ({ onChange }) => (
<input type="text" name="username" onChange={(e) => onChange(e.target.value)} />
);