Input component > feeds Forms component - how to handle submit?

Question

I am missing how to bring the input value out of the child component.

I have an Input component that I want to re-use, there I can see what happens onChange, and I see every change on the input field.

Then on the parent component, Form, where I use <Input />, I have the rest of the form with the Submit button. At this level, I want to handle onSubmit, but I cannot see/console the value of the input here. I can only see it from the child.

Any ideas about what I am doing wrong?

Input.js - here I can see the input value onChange

function Input(props) {
    const { label, name, value } = props;
    const handleChange = (event) => {
        const updateForm = {...Form};
        console.log("change:", updateForm)
        updateForm[label] = event.target.value;
      }
    return (
        <label>
            {label}
            <input name={name} value={value} onChange={handleChange}></input>
        </label> 
    )
}

export { Input }

Forms.js - here I cannot get access to the input value and submit/handle it

function Form(props) {
  
  const handleSubmit = (event) => {
    event.preventDefault();
    console.log(Input.value);
    console.log(props.label.value)
    alert(`form is: ${event.target.input}`);
  }
      return (
      <>
        <form onSubmit={handleSubmit}>
          <Input label={props.label} />
          <input type="submit" value="Submit"></input>
        </form>
      </>
    )
}

I have that structure because I am defining what I want in my Form on the main HomePage component:

  function Home() {
  return (
    <>
        .......
        <Section withForm label={["Name"]} {...homeObjFive}/>
        <Section withForm label={"Phone"} {...homeObjOne}/>
        .......

    </>
  )
}

Answer 1

Suppose you have a form with two inputs, name and email (these are the id props of the inputs). You can extract the form values like this:

  const handleSubmit = (event) =>
  {
    event.preventDefault()
    const data = new FormData(event.currentTarget)
    const name = data.get('name')
    const email = data.get('email')
    // do something with the data
  }

You can read more about FormData here.