React how to pass onSubmit handler through props to the components

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

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;

Answer 2

update your if condtion and form element to this

 <form onSubmit={props.onSubmitHandler}>

if (!form.userName && !form.password) {
// other code
}