CODEWITHSUNDEEP
reactjsforms
Tom Hunt
Tom Hunt

Reputation: 115

Get form data in child component's to parent for submission

I was just wondering how I can Retrieve form data when a user submits I want to be able to see it in the console.log Here is what my parent component looks like. Please note: I am quite new to react....Thanks!

class App extends Component {

 render() {

   return (

      <div className="App">

      //Each component contains a seperate page with a form element
      <PageOne />

      <PageTwo />
      <PageThree />
      <PageFour />
      <PageFive />
      <PageSix />

      <Button>
         Submit Form
      </Button>

      <br/>
      <br/>



      </div>

   );
 }
}

Upvotes: 1

Views: 783

Answers (1)

Daniel Cottone
Daniel Cottone

Reputation: 4480

Here's a simple example of how this would work. You should pass in a function to the onSubmit property of a form. This function takes in an event object, which will have an array of all it's children in the target property. You can select the index of the fields you want the value of, which will be in the value property. In the example below, we are logging the value of the input.

const onSubmit = (event) => {
  event.preventDefault();
  console.log('event', event.target[0].value);
};

const SimpleForm = () => (
  <form onSubmit={onSubmit}>
    <input type="text" />
    <button type="submit">Submit</button>
  </form>
);

ReactDOM.render(
  <SimpleForm />,
  document.body
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Upvotes: 1

Related Questions