Trying to pass parent to child in dumb component reusable component Redux - reactjs

Question

In my case I use Redux and want to make a reusable component that can pass from parent to child component when onChange function is being called. But not sure how to do that in dumb component, so I want to have an input field that when a user type some letters/numbers in that field. It should call the parent onChange function and based on that it should find the right component and pass that value to that component. Allmost any components except the CheckBox do have an onChange function. Is there a way to write that DRY and in a reusable way. There are more codes in the snippets below, please scroll down more.
const Parent = () => {
const checkForm = () => {
console.log('checkForm');
}
const onChange = (e) => {
getValue(e.target.value, e.target.name);
}
return (
<div className="App">
<form onSubmit={checkForm}>
<Name onChange={onChange}/>
<Surname onChange={onChange}/>
<Email onChange={onChange}/>
<PromoCode onChange={onChange}/>
<CheckBox/>
<button type="submit">Submit</button>
</form>
</div>
);
}
const mapDispatchToProps = dispatch => ({
getValue: (inputValue, componentName) => dispatch(getValue(inputValue, componentName))
});
const Name = () => {
return (
<div>
Name
<input
name='name'
type="text"
// value={this.state.name}
// onBlur={nameOnBlur}
onChange={onChange}
placeholder="Enter first name"
/>
</div>
)
}
const mapDispatchToProps = dispatch => ({
getValue: (inputValue, componentName) => dispatch(getValue(inputValue, componentName))
});
const mapStateToProps = (state) => {
return {
curInputValue: state.form.name || []
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Name);
export const form = (state = initialState, action) => {
switch(action.type) {
case types.GET_VALUE: {
return {
...state,
[action.componentName]: action.value
}
}
default:
return state;
}
}

Answer 1

To summarize the question I believe you are asking:
How do I write an onChange handler that can handle updating a variety of textfields inputs.
This could look something like:
const [formData, setFormData] = useState({name: '', surname: '', etc.})
const handleChange = (name) => event => {
setFormData({...state, [name]: event.target.value })
}
return (
<div>
<Name value={name} onChange={handleChange('name')} />
<Surname value={surname} onChange={handleChange('surname')} />
{...content}
</div> )
The key thing to note is that we store state in an object, one event handler is called for each time and it changes based on the param used.
If you are interested in using redux with this (I would advise against that unless you absolutely have to given the complexity it adds), the code would look similar but you would instead have to dispatch for each onChange fired and and the value would then be something like value={props.form.name}