I have created simple react Datepicker application. I get date from API stored useState() function const [datebirth, setDateBirth] = useState(''); after I changed date will send request another API. I want to update API. I will provide my code.
my handleChangeInput:
const handleChangeInput = (e) => {
const { name, value } = e.target;
setDatas((prevState) => ({
...prevState,
[name]: value,
}));
};
Datepicker Stored Date useState:
const [datebirth, setDateBirth] = useState('');
Get Date From API this format yyyy-MM-dd:
useEffect(() => {
fetchData();
}, [decryptedAccessToken]);
const fetchData = async () => {
try {
const response = await axios.get(
"https://rwood.znapay.in:5000/allcontactsbyID/" + id,
{
headers: { Authorization: `Bearer ${decryptedAccessToken}` },
}
);
const data = response.data[0].contact_details;
var d_o_b=response.data[0].contact_details.birthdate;
console.log(dataLength);
setDatas(data);
const dob = parse(d_o_b, 'yyyy-MM-dd', new Date());
const dobresult = format(dob, 'yyyy-MM-dd');
setDateBirth(dobresult)
setTimeout(() => {
$("#quotes").DataTable();
$("#history").DataTable();
}, 10);
} catch (error) {
console.error(error);
}
};
Update API:
const handleSaveEdit = (e) => {
e.preventDefault();
const responseData={
"saluation":datas.saluation,
"first_name":datas.first_name,
"last_name":datas.last_name,
"birthdate":datebirth,
"title":datas.title,
"account_name":datas.account_name,
"reports_to":datas.reports_to,
"contact_email":datas.contact_email,
"contact_mobile":datas.contact_mobile,
"contact_owner":datas.contact_owner,
"department":datas.department,
"lead_source":datas.lead_source,
"mail_street":datas.mail_street,
"mail_postal_code":datas.mail_postal_code,
"mail_city":datas.mail_city,
"mail_state":datas.mail_state,
"mail_country":datas.mail_country
};
fetch(`https://rwood.znapay.in:5000/contact/update/${id}`, {
method: 'PUT',
body: JSON.stringify(responseData),
headers: { Authorization: `Bearer ${decryptedAccessToken}`,
'Content-Type': 'application/json' },
})
.then((response) => response.json())
.then((updatedData) => {
console.log(updatedData)
console.log(JSON.stringify(responseData))
if(updatedData.msg==='contact updated successfully'){
// fetchData();
}
setData(updatedData);
setIsEditMode(false);
})
.catch((error) => console.error(error));
};
My form:
<>
<p className='edit-btn'>
<button className='btn btn-primary' onClick={handleSaveEdit}>Save</button>
<button className="btn btn-primary" onClick={handleCancelEdit}>Cancel</button>
</p>
<Row className="mb-3">
<div className='col-md-12'>
<h4 className='heading'>Contact Information</h4>
</div>
<Form.Group
as={Col}
md="6"
id=''
>
<FloatingLabel controlId="floatingSelect" className='dropDown' label="Salutation">
<Form.Select aria-label="Floating label select example"
name="saluation"
placeholder="Salutation"
defaultValue={datas.saluation || ""}
onChange={handleChangeInput}
>
<option value='' disabled>--None--</option>
<option value="Mr">Mr</option>
<option value="Ms">Ms</option>
<option value="Mrs">Mrs</option>
<option value="Dr">Dr</option>
<option value="Prof">Prof</option>
</Form.Select>
</FloatingLabel>
</Form.Group>
<Form.Group
as={Col}
md="6"
>
<FloatingLabel
controlId="floatingInput"
label="First Name"
className="mb-3"
>
<Form.Control
type="text"
placeholder="First Name"
name="first_name"
defaultValue={datas.contact_full_name || ""}
onChange={handleChangeInput}/>
</FloatingLabel>
</Form.Group>
<Form.Group as={Col} md="6">
<FloatingLabel
controlId="floatingInput"
label="Last Name"
className="mb-3"
>
<Form.Control type="text"
placeholder="Last Name"
name="last_name"
defaultValue={datas.last_name || ""}
onChange={handleChangeInput}/>
</FloatingLabel>
</Form.Group>
<Form.Group as={Col} md="6">
<FloatingLabel
controlId="floatingInput"
label="Birth Date"
className="mb-3 datepick"
>
<DatePicker
selected={startDate1}
onChange={(date) => setStartDate1(date)}
customInput={<CustomInput />}
dayClassName={() => "example-datepicker-day-class"}
popperClassName="example-datepicker-class"
todayButton="TODAY"
dateFormat='yyyy-MM-dd'
placeholderText='Birth Date'
/>
</FloatingLabel>
</Form.Group>
<Form.Group as={Col} md="6">
<FloatingLabel controlId="floatingSelect"
className='dropDown' label="Account name">
<Form.Select aria-label="Floating label select example"
name="account_name"
id='account_name'
placeholder="Account name"
defaultValue={datas.account_name || ""}
onChange={handleChangeInput}
>
<option value='' >Select</option>
{
accountNames.map((x)=>{
return(
<option value={x.account_name}>{x.account_name}</option>
)
})
}
</Form.Select>
</FloatingLabel>
</Form.Group>
<Form.Group as={Col} md="6">
<FloatingLabel
controlId="floatingInput"
label="Reports to"
className="mb-3"
>
<Form.Control type="text"
placeholder="Reports to"
name="reports_to"
defaultValue={datas.reports_to || ""}
onChange={handleChangeInput}/>
</FloatingLabel>
</Form.Group>
<Form.Group as={Col} md="6">
<FloatingLabel
controlId="floatingInput"
label="Contact Owner"
className="mb-3"
>
<Form.Control type="text"
placeholder="Contact Owner"
name="contact_owner"
defaultValue={datas.contact_owner || ""}
onChange={handleChangeInput}/>
</FloatingLabel>
</Form.Group>
<Form.Group as={Col} md="6">
<FloatingLabel
controlId="floatingInput"
label="Department"
className="mb-3"
>
<Form.Control type="text"
placeholder="Department"
name="department"
defaultValue={datas.department || ""}
onChange={handleChangeInput}/>
</FloatingLabel>
</Form.Group>
<Form.Group as={Col} md="6">
<FloatingLabel controlId="floatingSelect"
className='dropDown' label="Lead Source">
<Form.Select aria-label="Floating label select example"
name="lead_source"
id='account_name'
placeholder="Account name"
defaultValue={datas.lead_source || ""}
onChange={handleChangeInput}
>
<option value="">--None--</option>
<option value="Advertisement">Advertisement</option>
<option value="Customer Event">Customer Event</option>
<option value="Employee Referral">Employee Referral</option>
<option value="Google AdWords">Google AdWords</option>
<option value="Other">Other</option>
<option value="Partner">Partner</option>
<option value="Purchased List">Purchased List</option>
<option value="Trade Show">Trade Show</option>
<option value="Webinar">Webinar</option>
<option value="Website">Website</option>
<option value="Rajgopalan">Rajgopalan</option>
<option value="Olivia">Olivia</option>
</Form.Select>
</FloatingLabel>
</Form.Group>
</Row>
<Row>
<div className='col-md-12'>
<h4 className='heading'>Contact Information</h4>
</div>
<Form.Group as={Col} md="6" id='contact-title'>
<FloatingLabel
controlId="floatingInput"
label="Title"
className="mb-3"
>
<Form.Control
type="text"
placeholder="Title"
name="title"
defaultValue={datas.title || ""}
onChange={handleChangeInput}/>
</FloatingLabel>
</Form.Group>
<Form.Group as={Col} md="6">
<FloatingLabel
controlId="floatingInput"
label="Contact Email"
className="mb-3"
>
<Form.Control type="text"
placeholder="Contact Email"
name="contact_email"
defaultValue={datas.contact_email || ""}
onChange={handleChangeInput}/>
</FloatingLabel>
</Form.Group>
<Form.Group as={Col} md="6">
<FloatingLabel
controlId="floatingInput"
label="Contact Mobile"
className="mb-3"
>
<Form.Control type="text"
placeholder="Contact Mobile"
name="contact_mobile"
defaultValue={datas.contact_mobile || ""}
onChange={handleChangeInput}/>
</FloatingLabel>
</Form.Group>
</Row>
<Row>
<div className='col-md-12'>
<h4 className='heading'>Address Information</h4>
</div>
<Form.Group as={Col} md="6">
<FloatingLabel
controlId="floatingInput"
label="Mail Street"
className="mb-3"
>
<Form.Control type="text"
placeholder="Mail Street"
name="mail_street"
defaultValue={datas.mail_street || ""}
onChange={handleChangeInput}/>
</FloatingLabel>
</Form.Group>
<Form.Group as={Col} md="6">
<FloatingLabel
controlId="floatingInput"
label="Mail postal code"
className="mb-3"
>
<Form.Control type="text"
placeholder="Mail postal code"
name="mail_postal_code"
defaultValue={datas.mail_postal_code || ""}
onChange={handleChangeInput}/>
</FloatingLabel>
</Form.Group>
<Form.Group as={Col} md="6">
<FloatingLabel
controlId="floatingInput"
label="Mail city"
className="mb-3"
>
<Form.Control type="text"
placeholder="Mail city"
name="mail_city"
defaultValue={datas.mail_city || ""}
onChange={handleChangeInput}/>
</FloatingLabel>
</Form.Group>
<Form.Group as={Col} md="6">
<FloatingLabel
controlId="floatingInput"
label="Mail state"
className="mb-3"
>
<Form.Control type="text"
placeholder="Mail state"
name="mail_state"
defaultValue={datas.mail_state || ""}
onChange={handleChangeInput}/>
</FloatingLabel>
</Form.Group>
<Form.Group as={Col} md="6">
<FloatingLabel
controlId="floatingInput"
label="Mail country"
className="mb-3"
>
<Form.Control type="text"
placeholder="Mail country"
name="mail_country"
defaultValue={datas.mail_country || ""}
onChange={handleChangeInput}/>
</FloatingLabel>
</Form.Group>
</Row>
<p className='edit-btn'>
<button className='btn btn-primary' onClick={handleSaveEdit}>Save</button>
<button className="btn btn-primary" onClick={handleCancelEdit}>Cancel</button>
</p> </>