accounts.jsx

import React,{useContext, useState} from 'react';
import { StepperContext } from '../../contexts/StepperContext';
import axios from 'axios';
import './steps.css';

// const baseUrl = '';

const Accounts = () => {
  const {userData, setUserData} = useContext(StepperContext);
//   const [AccountData, setAccountData] = useState({
//         'full_name': '',
// 		'email': '',
// 		'submission': '',
// 		'status': ''

//   })

  const handleChange = (e) =>{
    const {name, value} = e.target;
    setUserData({ ...userData, [name]: value})
  }
  return (

      <div className="accounts__container">
          <form action ='#'>
                 <span className="title">CONTACT DETAILS</span>
               <div className='fields'>
                   <div class="input__field">
                          <label>Sender's Full Name</label>
                          <input type="text"
                          placeholder="Enter full name"
                          onChange={handleChange}
                          value={userData["Full Name"] || ""}
                          name="Full Names"
                          required/>
                    </div>

                    <div class="input__field">
                            <label>Sender's ID/ems NUMBER</label>
                            <input type="text"
                            placeholder="Enter your NO."
                            onChange={handleChange}
                            value={userData["Full Name"] || ""}
                            required/>
                    </div>

                        <div class="input__field">
                            <label> Sender's Email</label>
                            <input type="text"
                              placeholder="Enter Email"
                              onChange={handleChange}
                              value={userData["Full Name"] || ""}
                             required/>
                        </div>

                        <div class="input__field">
                            <label>Sender's Phone Number</label>
                            <input type="text"
                             placeholder="Enter phone number"
                             onChange={handleChange}
                             value={userData["Full Name"] || ""}
                             required/>
                        </div>

                        <div class="input__field">
                            <label> Recipient's Full Name</label>
                            <input type="text"
                            onChange={handleChange}
                            value={userData["Full Name"] || ""}
                            placeholder="Enter full name"
                            required/>
                        </div>

                        <div class="input__field">
                            <label>Recipent's ID/ems NUMBER</label>
                            <input type="text"
                            placeholder="Enter your NO."
                            onChange={handleChange}
                            value={userData["Full Name"] || ""}
                            required/>
                        </div>
                        <div class="input__field">
                            <label>Recipent's PHONE NUMBER</label>
                            <input type="text"
                            placeholder="Enter your NO."
                            required/>
                        </div>
               </div>
          </form>
      </div>
  )
}

export default Accounts