Update component state using props with another stateless component - reactjs

Question

I want to update the state of my stateful component 'LoginForm' inside of my stateless component 'InputRetro' I don't know the proper way of achieving it. Please help me.
'LoginForm' component codes:
import React, { Component } from 'react';
import './LoginForm.css';
import InputRetro from './InputRetro';
class LoginForm extends Component {
state = {
loginData : {
username : null,
password : null,
},
inputs : [
{ id : 'username', label : 'Username', type : 'text' },
{ id : 'password', label : 'Password', type : 'password' },
],
}
inputsJSX = this.state.inputs.map(input => {
return (
<InputRetro id={input.id} label={input.label} type={input.type} key={input.id} />
);
});
handleLogin = e => {
e.preventDefault();
// blank function.
}
render() {
return (
<form className='login-form' onSubmit={this.handleLogin}>
{ this.inputsJSX }
</form>
);
}
}
export default LoginForm;
'InputRetro' component codes:
import React from 'react';
import './InputRetro.css';
let InputRetro = props => {
const { id, label, type, placeholder } = props;
return (
<div className='InputRetro'>
<label>{label}</label>
<input id={id} type={type} placeholder={placeholder} />
</div>
);
}
export default InputRetro;
I want to update 'LoginForm' component's state values inside of 'InputRetro' component using an onChange or onKeyUp the state values I want to change are state.loginData.username and state.loginData.password when the input tag value of 'InputRetro' component is changed.
more details:
state.loginData.username value will store the value of 'InputRetro' component's input tag with an id of username with an onChange or onKeyUp event. Same in state.loginData.password.

Answer 1

You can pass a CallBack function from the parent component(LoginForm) to the child component(Input Retro) and then trigger that action in the child component on the button click.
LoginForm.js
import React, { Component } from 'react';
import './LoginForm.css';
import InputRetro from './InputRetro';
class LoginForm extends Component {
state = {
loginData : {
username : null,
password : null,
},
inputs : [
{ id : 'username', label : 'Username', type : 'text' },
{ id : 'password', label : 'Password', type : 'password' },
],
}
const ChangeState = (childData, flag) => {
flag === 1 ? state.loginData.username = childData : state.loginData.password = childData
}
inputsJSX = this.state.inputs.map(input => {
return (
<InputRetro id={input.id} label={input.label} type={input.type} callBackHandler={ChangeState} key={input.id} />
);
});
handleLogin = e => {
e.preventDefault();
// blank function.
}
render() {
return (
<form className='login-form' onSubmit={this.handleLogin}>
{ this.inputsJSX }
</form>
);
}
}
export default LoginForm;
In the child component you can call the callback function at whatever moment you like.
InputRetro.js
import React from 'react';
import './InputRetro.css';
let InputRetro = props => {
const { id, label, type, placeholder, callBackHandler } = props;
const handleClick = (event) => {
label === 'email' ? callBackHandler(event.target.value, 1) : callBackHandler(event.target.value, 2)
}
return (
<div className='InputRetro'>
<label>{label}</label>
<input id={id} type={type} placeholder={placeholder} onChange={event => handleClick(event)} />
</div>
);
}
export default InputRetro;