Edit Functionality React

Question

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

Answer 1

It's because your initial state for every field is an empty string. It will set empty input every time when you open the popup.

Try to parse prop or use redux for global state management.

const Edit= ({closeSuspenduser,previousData}) => {
const [categories, setCategories] =  useState([]);
const [data, setData] = useState ({
  title: previousData.title,
  serialnumber: previousData.serialnumber,
  price: previousData.price,
  category: previousData.category,
  description: previousData.description 
})

 function handle(e) {
  const newdata ={ ...data }
  previousData[e.target.id] = e.target.value
  setData(previousData)
  console.log(previousData)
 }

Do something like this.