import React, { useEffect, useState } from 'react'
import '../assets/css/popup.css';
import { IoIosCloseCircle } from "react-icons/io";
import axios from 'axios';
import {useParams } from 'react-router-dom';
const Edit= ({closeSuspenduser}) => {
const [categories, setCategories] = useState([]);
const [data, setData] = useState ({
title: "",
serialnumber: "",
price: "",
category: "",
description: ""
})
const [profile, setProfile] = useState([]);
const {assetId } = useParams();
const getAssetProfile = (assetId) => {
axios.get(`/assets/${assetId}`, {
responseType: 'json'
}).then(response => {
if (response.status === 200) {
console.log(response.data)
setProfile(response.data)
}
})
}
useEffect(() => {
if (assetId) {
getAssetProfile(assetId);
}
}, [assetId])
function submit(e) {
e.preventDefault();
axios.put(`/assets/${assetId}`, {
title: data.title,
serialnumber: data.serialnumber,
price: data.price,
category: data.categorie_id,
description: data.description
})
.then(res => {
console.log(res.data)
window.location.href = "../Assets";
})
}
function handle(e) {
const newdata ={ ...data }
newdata[e.target.id] = e.target.value
setData(newdata)
console.log(newdata)
}
return(
<div>
<div className='popup'>
<div className='popup-content'>
<div className='popupheader'>
<h3>EDIT ASSET</h3>
<button className='close'onClick={() => closeSuspenduser(false)}>
<IoIosCloseCircle size='2rem' color='var(--gray)' className='closebtn'/>
</button>
</div>
<div className='popup-main'>
<form onSubmit={(e) => submit(e)}>
<div className='email'>
<h4>ASSET NAME</h4>
<input type='text' placeholder={profile.title} onChange={(e) => handle(e)} id="title" value={data.title}/>
</div>
<div className='username'>
<h4>SERIAL NUMBER</h4>
<input type='text' placeholder={profile.serialnumber} onChange={(e) => handle(e)} id="serialnumber" value={data.serialnumber}/>
</div>
<div className='password'>
<h4>PRICE</h4>
<input type='number' placeholder={profile.price} onChange={(e) => handle(e)} id="price" value={data.price}/>
</div>
<div className='password'>
<h4>DATE PURCHASED</h4>
<input type='date' onfocus="(this.type='date')" onblur="(this.type='text')" placeholder={profile.purchase_date} onChange={(e) => handle(e)} id="purchase_date" value={data.purchase_date}/>
</div>
<div className='assign-assets'>
<h4>CATEGORY</h4>
{/* <select>
<option disabled selected value="">{profile.categorie[0].title}</option>
{
categories.map((val) => {
return(
<option onChange={(e) => handle(e)} id="category" value={data.category.}>{val.title}</option>
)})
}
</select> */}
</div>
<div className='accessories'>
<h4>DESCRIPTION</h4>
<input type='text' placeholder={profile.description} onChange={(e) => handle(e)} id="description" value={data.description}/>
</div>
<button className='createuser'>
SAVE EDITS
</button>
</form>
</div>
</div>
</div>
</div>
)
}
export default Edit;
this is an edit popup; I am trying to view the previous data information in the input so as to edit.
Also while editing a specific input, I am losing all the previous data …
How do I retain the previous information after editing so I can save all of them instead of re-editing every input in the form