react props and events

Question

staffForm.js

import React from 'react'
import { Link } from 'react-router-dom';
const StaffForm = ({handleSubmit},props) => {
    // console.log(props);
 const title = props.title;
 const link =props.link;
    return (
    <section>

                    <div class="Employewrapper">
                        <div class="title">
                            {title} registration
                        </div>
                        <form class="form" onSubmit={handleSubmit} encType='multipart/form-data'>
                            <div class="inputfield">
                                <label>First Name</label>
                                <input required type="text" class="input" name='first_name'/>
                            </div>
                            <div class="inputfield">
                                <label>Last Name</label>
                                <input required type="text" class="input" name='last_name'/>
                            </div>
                            <div class="inputfield">
                                <label>Email</label>
                                <input required type="email" class="input" name='email'/>
                            </div>
                            <div class="inputfield">
                                <label>Password</label>
                                <input required type="password" class="input" name='password'/>
                            </div>
                            <div class="inputfield">
                                <label>Confirm password</label>
                                <input required type="password" class="input" name='confirm_password'/>
                            </div>
                            <div class="inputfield">
                                <label>Phone</label>
                                <input required type="tel" class="input" name='phone'/>
                            </div>

                            <div class="inputfield">
                                <label for="file">Profile Picture</label>
                                <input required type="file" id="file" accept="image/*" class="input" name='profile_picture'/>
                            </div>
                            <div class="inputfield">
                                <label>Birthdate</label>
                                <input required type="date" class="input" name='birthdate'/>
                            </div>
                            <div class="inputfield">
                                <label for="file">Id Card</label>
                                <input required type="file" id="file" accept="image/*" class="input" name='identification_card'/>
                            </div>
                            <div class="inputfield">
                                <input required type="submit" class="btn" />
                            </div>
                            <Link to={link} className='btn'>Back {title}</Link> 
                        </form>
                    </div>
                </section>
  )
}
 export default StaffForm;

DeliveryForm.js

import React from 'react'
import { Link } from 'react-router-dom';
import axios from 'axios';


import StaffForm from '../../Components/StaffForm';
import "../../Assets/styles/button.css"
 const DeliveryForm = () => {
    const url  = 'http://127.0.0.1:8000/staff/delivery/';
  
  
    const handleSubmit = (event)=>{
      event.preventDefault();
      const data = {
          "user": {
              "first_name": event.target.first_name.value,
              "last_name": event.target.last_name.value,
              "email": event.target.email.value,
              "password": event.target.password.value,
              "confirm_password": event.target.confirm_password.value,
              "phone": event.target.phone.value
          },
          "profile_picture": event.target.profile_picture.files[0],
          "birthdate": event.target.birthdate.value,
          "identification_card": event.target.identification_card.files[0]
      }
      axios.request({
          method: 'post',
          headers: {
              "Content-Type": "multipart/form-data",
          },
          url,
          data
      }).then(res => {
          console.log(res)
      })
    }
  return (
    <>
        <StaffForm handleSubmit={handleSubmit} title="Delivery" link="/Delivery"/>

    </>
  )
}
export default DeliveryForm

i have a particular form which i will be using for 3 api's the only difference are the title an the link i know the conventional way of writing props but it seems it not working in this case. on my page its not rendering anything but when i remove the props it works. i tried swithing the position of the props and the {handleSubmit}, when doing that i can see the prop but i can't post.

Answer 1

Just do it as you did with previous things in props.

const StaffForm = (props) => {
  const handleSubmit = props.handleSubmit;
  const title = props.title;
  const link = props.link;

Or you will need to deconstruct everything in one place.

const StaffForm = ({ handleSubmit, title, link }) => {

Why: because props object is the first parameter, always. In my example you deconstruct it, and in your code - you deconstruct only handleSubmit from it and somewhy you were expecting to get a second parameter which you named props. No, only one and only first parameter is your props object.

Additionaly, you can use

const StaffForm = (props) => {
  const { handleSubmit, title, link } = props;

or

// Spread operator
const StaffForm = ({handleSubmit, ...props}) => {
  const { title, link } = props;