React how to pass onSubmit handler through props to the components - reactjs

Question

I have developed a simple login component for my project. In this I am having two fields (UserName and Password) along with onSubmit handler. I need to pass the onSubmit handler through the props to the components which accepts two params(Username and Password). When I am calling the onsubmit handler I need to call handler with password and username password as params. I have wrote the logic for the same but when I am rendering I am not getting the textbox to fill (userName and Password). Any one can help me to sort out this issue? Thanks in advance. I have wrote down the code below.
function FormDetails(props) {
return (
<div>
<form onSubmitHandler={props.onSubmitHandler}>
<input type="text" id="user-input" name="userName" />
<input type="password" id="password-input" name="password" />
<button type="submit">Submit</button>
</form>
</div>
);
}
function LoginForm() {
const [form, setForm] = useState({
userName: "",
password: "",
});
const onSubmitHandler = (e) => {
e.preventDefault();
console.log("form.userName", form.userName);
setForm({ [e.target.name]: e.target.value });
};
if (form.userName && form.password == null) {
return <FormDetails onSubmitHandler={onSubmitHandler} />;
}
return (
<div>
UserName:{form.userName}
Password:{form.password}
</div>
);
}
export default LoginForm;

Answer 1

update your if condtion and form element to this
<form onSubmit={props.onSubmitHandler}>
if (!form.userName && !form.password) {
// other code
}

Answer 2

the if condition
the if condition should be revesed because you want to show the form if the values are falsy("" empty string, undefined, null ...)
if (!form.userName || !form.password) {
// ^-- ^--
return <FormDetails onSubmitHandler={onSubmitHandler} />;
}
moving values from child to parent
use a ref for the username & password fields
const userName = useRef(null);
const password = useRef(null);
pass the values up with the handleSubmit callback
<div>
<form
onSubmit={(e) => {
e.preventDefault();
console.log({
userName: userName.current.value,
password: password.current.value
});
props.onSubmitHandler({
userName: userName.current.value,
password: password.current.value
});
}}
>
<input ref={userName} type="text" id="user-input" name="userName" />
<input
ref={password}
type="password"
id="password-input"
name="password"
/>
<button type="submit">Submit</button>
</form>
</div>
Final result
import { useState, useRef } from "react";
function FormDetails(props) {
const userName = useRef(null);
const password = useRef(null);
return (
<div>
<form
onSubmit={(e) => {
e.preventDefault();
console.log({
userName: userName.current.value,
password: password.current.value
});
props.onSubmitHandler({
userName: userName.current.value,
password: password.current.value
});
}}
>
<input ref={userName} type="text" id="user-input" name="userName" />
<input
ref={password}
type="password"
id="password-input"
name="password"
/>
<button type="submit">Submit</button>
</form>
</div>
);
}
function LoginForm() {
const [form, setForm] = useState({
userName: "",
password: ""
});
const onSubmitHandler = (val) => {
setForm(val);
};
if (!form.userName || !form.password) {
return <FormDetails onSubmitHandler={onSubmitHandler} />;
}
return (
<div>
UserName:{form.userName}
Password:{form.password}
</div>
);
}
export default LoginForm;