score:2

Accepted answer

you can use a combination of forwardref and useimperativehandle to expose out a function from the child component that a parent component can invoke.

child - import and decorate the child component with forwardref and use the useimperativehandle to expose a getimage function that returns the current image state.

import react, { usestate, fragment, forwardref } from "react";
...

const imageupload = forwardref(({text}, ref) => {
  const [image, setimage] = usestate("");
  const [isuploaded, setisuploaded] = usestate(false);

  useimperativehandle(ref, () => ({
    getimage: () => image,
  }));

  const handleimagechange = (e) => {
    ...
  };

  return (
    ...
  );
});

parent - create a react ref to pass to imageupload and in the callback access the current ref value and invoke the function.

import react, { fragment, usestate, useref } from "react";
...

const upload = () => {
  const [weight, setweight] = usestate("");

  const imageuploadfrontref = useref();
  const imageuploadsideref = useref();
  const imageuploadbackref = useref();

  const [uploaderrors, setuploaderrors] = usestate([{}]);

  const upload  = (e) => {
    e.preventdefault();
    
    const imagefront = imageuploadfrontref.current.getimage();
    const imageside = imageuploadsideref.current.getimage();
    const imageback = imageuploadbackref.current.getimage();

    // do with the images what you need.
  }

  return (
    <fragment>
      <container>
        <formwrap>
          <formcontent>
            <form onsubmit={upload}>
              ...
              <photowrap>
                <imageupload ref={imageuploadfrontref} {...frontphototext} />
                <imageupload ref={imageuploadsideref} {...sidephototext} />
                <imageupload ref={imageuploadbackref} {...backphototext} />
              </photowrap>
              ...
            </form>
          </formcontent>
        </formwrap>
      </container>
    </fragment>
  );
};

Related Query

More Query from same tag