Question 246503 in Html Question posted in
Some basic documentation can be found here.

Html – How do i pass form input values from child component to the father component in REACT?

i just started with react, specifically i am trying to use forms, i tried to make a simple project, where i got a form component with some inputs, once i click the submit button it should pass the inputs value to the father component (app) and it should render it in a custom list component that i wrote.
The only problem is that when i try to access the event value it comes out as undefined, what am i doing wrong?

Following is my code, for simplicity sake i am trying to render just the first imput for now

import './App.css';



function Form({onChangeName}) {

    return (
        <div className="container">
          <h1>
            Hello 
          </h1>
          <form onSubmit={onChangeName}>
            <input name="fName" placeholder="First Name"  />
            <input name="lName" placeholder="Last Name"  />
            <input name="email" placeholder="Email"  />
            <button type="submit">Submit</button>
          </form>
        </div>
      );
}

export default Form;

:

import List from './List';
import './App.css';
import Form from './Form';
import { useState } from 'react';

function App() {

  const [contact, setContact] = useState({
    fName: "",
    lName: "",
    email: ""
})



function onChangeName(event){
  const { name, value } = event.target;
  console.log(value)
  setContact({
    fname: value,
    lName: "",
    email: ""
  })
}


  return (
    <div className="App">
      <Form onChangeName={onChangeName} fName={contact.fName} lName={contact.lName} email={contact.email} />
      <List fName={contact.fName} lName={contact.lName} email={contact.email}/>
    </div>
  );
}

export default App;
import logo from './logo.svg';
import './App.css';

function List({fName,lName,email}) {
    return(
        <ul>
            <li>{fName}</li>
            <li>{lName}</li>
            <li>{email}</li>
        </ul>
    )
   
}

export default List;
Tags:

3

Answers


  1. 0

    You are listening on the submit event of the form, whose event object does not have name and value properties, like the change or input events of input elements would have.

    You can write an intermediate function in your child component to extract the data you need, and then call the handler you passed as a prop, like:

    function Form({ onChangeName }) {
    function onSubmit(event) {
        event.preventDefault();
        const data = new FormData(event.target);
        onChangeName(data)
    }
    return (
        <div className="container">
            <h1>Hello</h1>
            <form onSubmit={onChangeName}>
                <input name="fName" placeholder="First Name" />
                <input name="lName" placeholder="Last Name" />
                <input name="email" placeholder="Email" />
                <button type="submit"> Submit </button>
            </form>
        </div>
    );
}

export default Form;

    Then in the parent component:

    import Form from "./Form";
import { useState } from "react";

function App() {
    const [contact, setContact] = useState({
        fName: "",
        lName: "",
        email: "",
    });

    function onChangeName(data) {
        setContact(data);
    }

    return (...);
}

export default App;

    I would also rename the onChangeName function to something more generic, since it affects the whole form.

    Login or Signup to reply.
  2. 0

    The event target is the form itself. So to get the input value directly like you are trying to do, replace the line

    const { name, value } = event.target;

    With the line

    const { name, value } = event.target.fName;
    Login or Signup to reply.
  3. 0

    Sorry For the late Reply, this will help you seriously. (if you like my answer please mark it as correct answer for vote)

    The issue you’re facing is due to how you’re handling the form submission and accessing the event value in your Form component. Here’s how you can modify your code to make it work as intended:

    1. In your Form component, you should use the useState hook to manage
      the form input values and handle changes to the input fields.

    2. In the Form component, you can use the onChange event handler to
      update the form state when input values change.

    3. Modify the onChangeName function to prevent the default form
      submission behavior and pass the current form state to the App
      component.

    Form.js

    import React, { useState } from 'react';

function Form({ onSubmit }) {
    const [formData, setFormData] = useState({
        fName: '',
        lName: '',
        email: '',
    });

    const handleInputChange = (event) => {
        const { name, value } = event.target;
        setFormData({
            ...formData,
            [name]: value,
        });
    };

    const handleSubmit = (event) => {
        event.preventDefault();
        onSubmit(formData); // Pass the form data to the parent component
    };

    return (
        <div className="container">
            <h1>Hello</h1>
            <form onSubmit={handleSubmit}>
                <input
                    type="text"
                    name="fName"
                    placeholder="First Name"
                    value={formData.fName}
                    onChange={handleInputChange}
                />
                <input
                    type="text"
                    name="lName"
                    placeholder="Last Name"
                    value={formData.lName}
                    onChange={handleInputChange}
                />
                <input
                    type="email"
                    name="email"
                    placeholder="Email"
                    value={formData.email}
                    onChange={handleInputChange}
                />
                <button type="submit">Submit</button>
            </form>
        </div>
    );
}

export default Form;

    In the above code:

    1. We use the useState hook to create a formData state object that stores the values of the form fields.

    2. The handleInputChange function is called when any input field changes, and it updates the corresponding field in the formData state.

    3. The handleSubmit function prevents the default form submission and calls the onSubmit prop function, passing the current formData.

    Now, in your App component, you can update the onChangeName function and pass the form data to the List component:

    App.js

    import React, { useState } from 'react';
import Form from './Form';
import List from './List';

function App() {
  const [contact, setContact] = useState({
    fName: '',
    lName: '',
    email: '',
  });

  const onChangeName = (formData) => {
    setContact(formData);
  };

  return (
    <div className="App">
      <Form onSubmit={onChangeName} />
      <List fName={contact.fName} lName={contact.lName} email={contact.email} />
    </div>
  );
}

export default App;

    List.js

    import logo from './logo.svg';
import './App.css';

function List({ fName, lName, email }) {
    return (
        <ul>
            <li>{fName}</li>
            <li>{lName}</li>
            <li>{email}</li>
        </ul>
    )

}

export default List;

    With these modifications, your code should work as expected, and the input values from the Form component will be correctly passed to the List component for rendering.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search