I'm trying to create components a (parent, child and input) and pass variables from the parent component to child and input components, allow for the variables to change within the child components and access the mutated variable in the parent component. With the below code, the text doesn't update when typing in the input field, and my setValue function isn't called in the parent component. Also, as you can see in my code below, the function setValue is there to handle all of the possible variable changes, but I'm not sure how to implement that. Any help would be greatly appreciated. Thank you.
function CreateAccount() { const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [confirmPassword, setConfirmPassword] = useState(""); const setValue = (newValue, valueType) => { if (valueType === "email") setEmail(newValue); else if (valueType === "password") setPassword(newValue); else setConfirmPassword(newValue); } return (<Form email={email} password={password} confirmPassword={confirmPassword} viewType="createClientAccount" onChangeState={setValue} /> )}function Form({ email, password, confirmPassword, viewType, onChangeState }) { if (viewType === "createClientAccount") { return (<div className="box-shadow"><h2>Create Client Account</h2><TextInputField label={"Email"} value={email} onChangeState={onChangeState} /></div> ) }}function TextInputField({label, value, onChangeState}) { function onChange() { onChangeState(value) } return (<div className="inputFieldWrapper"><p>{label}</p><input name="email" value={value} onChange={onChange}/></div> )}