I want to edit my rerender item. To explain better that I could identify If I edited that certain item here is the code for the array

const [savedAccounts,setsavedAccounts] = 
0: {nick: "xaxa", pass: "215151", uid: "1123151", gallery: []}
1: {nick: "SamServer", pass: "mathlearner18", uid: "123456123456", gallery: []}

I already have the solution to insert my item in my gallery by rerendering the item using these code it is updating of items in a gallery of a certain account This is the functional codes for updating the gallery items

const [isuploadgallery,setisuploadgallery] = useState(false);
const [textgallery,setTextgallery] = useState();

const handleTextGallery = e => {
    setTextgallery(e.target.value)
}
 const Profile = styled.button`        
    width:calc(400px);
    height:calc(400px);
    border-radius: 100%;
`;

 const [gallery,setgallery] = useState(null)

 const hiddenFileInput2 = useRef(null);

 const handleClickGallery = event => {
  hiddenFileInput2.current.click();
};
const handleChangeGallery = event => {
  const fileUploaded = URL.createObjectURL(event.target.files[0]);
  setgallery(fileUploaded);
};

const handleUploadPost = e => {
    e.preventDefault()
    multisavedAcc(prevState => {
        return prevState.map(acc_ => {
            if (acc_.uid === uid) {
                return {
                    ...acc_,
                    gallery: [
                        ...acc_.gallery,
                        { img: gallery, description: textgallery }
                    ]
                };
            } else {
                return acc_
            }
        });
    });
}

And this is for the inputs that create the gallery of the account

<div>
  <div className="popup-box">
  <div className="box">
    <div className="item-box">
      <span className="close-icon" onClick={togglePopup}>x</span>
      <b>Design your Popup</b>
       <Profile onClick={handleClickGallery}>
         <img src={gallery} alt="" />
       </Profile>
       <input type="file"
       ref={hiddenFileInput2}
       onChange={handleChangeGallery}
       style={{display:'none'}} 
       /> 
     <div className="context">
     Description <button onClick={e => setisuploadgallery(true)}> Edit </button>
     </div>
    { isuploadgallery ? <> 
     <div className="edit-area">
    <textarea name="Text1" cols="40" rows="5" value={textgallery} onChange={e => handleTextGallery(e)}></textarea> 
     <button onClick={e => setisuploadgallery(false)}> Update </button>
     </div>
     </>
     : <><p> {textgallery} </p></> }
     <button onClick={e => handleUploadPost(e)}> Upload Post </button>
     </div>
     </div>
     </div>

      </div> 

As you see I update my items in my gallery as img and description and so that I could update my arrays in gallery. But I want to edit it each of gallery of the item accounts. I already tried this idea

multisavedAcc(prevState => {
        return prevState.map((acc_) => {
            if (acc_.uid === uid) {
                return (
                    acc_.gallery[editindex].description = textgalleryedit
                )
            } else {
                return acc_
            }
        });
    });

but It didn't work cause it is deleting the name of the gallery and turn it into null. I was trying the CRUD method wherein I can edit it but I just can't do it, I don't know where suppose edit it in the part of UploadPost can anyone find the solution this for me?

Here is the expected output that I want to do

Let say I have

const [savedAccounts,setsavedAccounts] = 
0: {nick: "xaxa", pass: "215151", uid: "1123151", gallery: []}
1: {nick: "SamServer", pass: "mathlearner18", uid: "123456123456", gallery: [{img:"img1",description:"text1"},{img:"img2",description:"text2"}]}

and I want to edit my gallery of my open account is "SamServer" that will have this output

1: {nick: "SamServer", pass: "mathlearner18", uid: "123456123456", gallery: 
[{img:"newimg1",description:"newtext1"},{img:"newimg2",description:"newtext2"}]}

If my question is terrible please edit it for me. Please someone answer this so I could finish my full stack website hehe. Its something like this

CodePudding user response：

Your second snippet where you tried using the editindex was closer, but you weren't correctly also creating a shallow copy of the gallery array. When updating React state anything that is being updated needs to be shallow copied into a new object/array reference.

Try the following to shallow copy the multisaved array state, then the user object, then the gallery array.

const handleUploadPost = (e) => {
  e.preventDefault();
  multisavedAcc((prevState) => {
    return prevState.map((acc_) => {
      if (acc_.uid === uid) {
        return {
          ...acc_,
          gallery: acc_.gallery.map((el, index) =>
            index === editindex
              ? {
                  ...el,
                  description: textgalleryedit
                }
              : el
          )
        };
      } else {
        return acc_;
      }
    });
  });
};