Hey I am pretty noob at React. This props and State stuff are eating my head. Anyway, my problem is that, I have 3 Componenets "LoginForm", "InputField", "SubmitButton"
What I need is, I want to pass "Username" and "Password" details to SubmitButton Component when the SubmitButton clicked. I tried and succeded to pass data from InputField to LoginForm whenever the inputfield value changes, but couldn't do the same to "SubmitButton" Component.
Thanks in Advance :)
The code is here as follows.
//LOGING FORM COMPONENT
class LoginForm extends React.Component {
eventHandler = function (data) {
console.log(data)
}
render() {
return (
<div>
<InputField onChange={this.eventHandler}/>
<SubmitButton/>
</div>
)
}
}
export default LoginForm;
//INPUT FIELD COMPONENT
class InputField extends React.Component {
constructor(props){
super(props);
this.state={
username:'',
password:''
};
this.handleChange=this.handleChange.bind(this)
}
handleChange = e => {
this.setState({ [e.target.name]: e.target.value }, () => {
if (this.props.onChange) {
this.props.onChange(this.state);
}
})
};
render() {
return (
<div>
<div>
<input name='username' onChange={this.handleChange}></input>
</div>
<div>
<input name='password' type='password' onChange={this.handleChange}></input>
</div>
</div>
)
}
}
export default InputField;
//SUBMIT BUTTON COMPONENT
class Submit_Button extends React.Component {
constructor(props){
super(props);
this.loginBtn=this.loginBtn.bind(this)
}
loginBtn = function (data) {
//Empty Because, dont know what to code xD
}
render() {
return (
<div>
<button onClick={this.loginBtn}>
Login</button>
<svg class="bi bi-person" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M13 14s1 0 1-1-1-4-6-4-6 3-6 4 1 1 1 1h10zm-9.995-.944v-.002.002zM3.022 13h9.956a.274.274 0 00.014-.002l.008-.002c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664a1.05 1.05 0 00.022.004zm9.974.056v-.002.002zM8 7a2 2 0 100-4 2 2 0 000 4zm3-2a3 3 0 11-6 0 3 3 0 016 0z" clip-rule="evenodd" />
</svg>
</div>
)
}
}
export default Submit_Button;
SOLVED
class LoginForm extends React.Component {
constructor(props){
super(props);
this.state={
username:'',
password:''
};
}
eventHandler = (data) =>{
console.log(data)
this.setState({
username:data.username,
password:data.password
},
console.log(this.state.username))
}
render() {
return (
<div>
<InputField onChange={this.eventHandler}/>
<SubmitButton username={this.state.username} password={this.state.password}/>
</div>
)
}
}
export default LoginForm;
class InputField extends React.Component {
constructor(props){
super(props);
this.state={
username:'',
password:''
};
this.handleChange=this.handleChange.bind(this)
}
handleChange = e => {
this.setState({ [e.target.name]: e.target.value }, () => {
if (this.props.onChange) {
this.props.onChange(this.state);
}
},
)
};
render() {
return (
<div>
<div>
<input name='username' onChange={this.handleChange}></input>
</div>
<div>
<input name='password' type='password' onChange={this.handleChange}></input>
</div>
</div>
)
}
}
export default InputField;
class Submit_Button extends React.Component {
constructor(props){
super(props);
this.loginBtn=this.loginBtn.bind(this)
}
loginBtn = function (data) {
console.log( this.props.username, this.props.password)
}
render() {
return (
<div>
<button onClick={this.loginBtn}>
Login</button>
<svg className="bi bi-person" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fillRule="evenodd" d="M13 14s1 0 1-1-1-4-6-4-6 3-6 4 1 1 1 1h10zm-9.995-.944v-.002.002zM3.022 13h9.956a.274.274 0 00.014-.002l.008-.002c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664a1.05 1.05 0 00.022.004zm9.974.056v-.002.002zM8 7a2 2 0 100-4 2 2 0 000 4zm3-2a3 3 0 11-6 0 3 3 0 016 0z" clipRule="evenodd" />
</svg>
</div>
)
}
}
export default Submit_Button;
