setState through onchange of an array of object

Question

how can I update my values of an array and add values after every form submission, all things working fine except for the onchange function, or if anybody has any better way to do it do let me know.

an array of objects:

 const [detailPetition, setDetailPetition] = useState([{
    description: "",
    recipientAddress: "",
    amountNeed: "",
    grandPermissionCount: 0,
    isFullfilled: false,
  }]);

Onchange function:

const enterDetails = (event,id) => {
    const { value, name } = event.target;
    setDetailPetition((pervState) =>{
      return pervState.map((data,index)=>{
          if(index===id)
          return {...data,[name]:value};
          else
          return data;
      })
      })
    };

mapping data

 const Mappetition = () => {
    const petitiondetail = detailPetition.map((data, index) =>
      <Petition
        key={index}
        account={account}
        description={detailPetition.description}
        recipientAddress={detailPetition.recipientAddress}
        amountNeed={detailPetition.amountNeed}
        enterdetail={enterDetails}
        submitpetition={enterPetition}
      />
    )
    return petitiondetail;
  }

Answer 1

There is only 1 object. So no need for an array here

   const [detailPetition, setDetailPetition] = useState({
    description: "",
    recipientAddress: "",
    amountNeed: "",
    grandPermissionCount: 0,
    isFullfilled: false,
  });

onChange,

        const enterDetails = (event) => {
         const { value, name } = event.target;
         setDetailPetition({...detailPetition, [name]: value);

Data rendering,

return (
  <Petition
    key={index}
    account={account}
    description={detailPetition.description}
    recipientAddress={detailPetition.recipientAddress}
    amountNeed={detailPetition.amountNeed}
    enterdetail={enterDetails}
    submitpetition={enterPetition}
  />
     )