How to pass props from a reusable form in React

Question

I'm building a reusable form in React to be used as login and signin forms in may app. I'm using Axios to send the data to the database.

But I can't send the input values as props to my UserSignIn component to use them in a function with Axios. Here's the code :
How do I get these props ? Thanks

AccountForm component :

import React, { Component } from "react";
import {Grid,Input, InputLabel, FormControl, Typography, Button, Paper,  
 } from "@material-ui/core";

class AccountForm extends Component {
constructor(props) {
  super(props);
  this.state = {
   userSignUpName: "",
   userSignUpEmail: ""
}

  handleChange(e) {
  this.setState({
  [e.target.id]: e.target.value
});
}

render() {
  const {
  classes,
  formType,
  onCreateAccount,
  onSubmit,
  onBlurCheck,
  message,
  title
 } = this.props;

 const {
  userSignUpName,
  userSignUpEmail,
 } = this.state;

  return (
  <div>
    <Grid container justify="center">
      <Grid item xs={10}>
        <Paper>
          <form
            onChange={e => this.handleChange(e)}
            onSubmit={onSubmit}
          >
            <Typography variant="subheading" color="primary"   
 align="center">
              {title}
            </Typography>
            {formType === "signin" && (
              <FormControl>
                <InputLabel htmlFor="name">Nom</InputLabel>
                <Input id="userSignUpName" name="name" type="text" />
              </FormControl>
            )}
            <FormControl>
              <InputLabel htmlFor="email">Email</InputLabel>
              <Input id="userSignUpEmail" type="email" name="email" />
                 </FormControl>
              </form>
            </Paper>
          </Grid>
        </Grid>
      </div>
    );
  }
 }

 export default AccountForm;

UserSignIn component :

import React, { Component } from "react";
import axios from "axios";
import config from "../../assets/lib/axiosConfig";
import { AccountForm } from "./Index";


 class UserSignIn extends Component {
  constructor(props) {
  super(props);
 this.state = {
  formType: "signin",
  title: "Create account"
  };
}


 handleSubmit(e) {
  e.preventDefault();
  axios(
   config(
    {
      name: this.props.userSignUpName,
      email: this.props.userSignUpEmail,

    },
    "/createAccount",
    "post"
   )
  ).then(res => {
   const { success, error, token } = res.data;
   if (success) {
    localStorage.setItem("AuthToken", token);
    this.props.redirectTo();
   }
   if (error) {
     this.setState({ message: error });
    }
  });
}

 render() {
 const { prevPath, history, userSignUpName } = this.props;
 // I can't get userSignUpName props
 const { formType, message, title } = this.state;
 return (
  <AccountForm
    {...this.props}
    title={title}
    onSubmit={e => this.handleSubmit(e)}
    formType={formType}
    redirectTo={
      prevPath !== null && prevPath === "/mycart"
        ? () => history.push("/payment")
        : () => history.push("/")
      }
     />
    );
  }
}

export default UserSignIn;

Thanks

Answer 1

You can pass form data as handleSubmit parameters

AccountForm component :

    <form
        onChange={e => this.handleChange(e)}
        onSubmit={(e) => {
                e.preventDefault()
                onSubmit({
                    userSignUpName: this.state.userSignUpName,
                    userSignUpEmail: this.state.userSignUpEmail,
                })
            }}
      >

UserSignIn component :

handleSubmit(params) {
  axios(
   config(
    {
      name: params.userSignUpName,
      email: params.userSignUpEmail,

    },
   //....
}