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>
);
};
Source: stackoverflow.com
Related Query
- How to get acces to a child useState in React?
- How to get values from child components in React
- react - how do I get the size of a component child elements and reposition them
- How do I get acces to only one item from map method in react js
- How to get a specific child in a React component?
- React & Typescript how get onClick prop from child to parent
- How to get useForm data in react component when input fields are in child component?
- React How to change state value from child to Parent using useState and useContext
- React - How to get state data from a child component?
- How to get and display all child list from Firebase React
- React js - How to get Click event values from child component to parent component?
- how to get, by a get from axios, data in useState with react functionnal component
- How to get react grand-child node to render when child is out of my control
- React Hook - I always get stale values from useState just because child component never updates
- How to get parent props in child component when using styled component in react
- How to register only once in react useEffect and get useState changes
- How to get parent props from child composition component React
- How to get the return value of parent function to child component in react (Using props)
- how to get the data from child component in stepper in react material ui?
- React How to get selected value from child component to parent component TypeScript
- how to get route param values of child component from parent component in app using React Router
- how to get updated value of react useState hook from setInterval function in highcharts?
- How to get state from child to parent react
- React How to Get Value of a SelectList from a Child Component
- How to use index and get rid of React Warning: Each child in a list should have a unique "key" prop?
- How to get state from two child components in React
- how can get data from api to child combobox in react
- How to get all the child elements inside a component in unit test using react and enzyme?
- How to get text() of Child Component in Enzyme / React
- useState in react : how to get each props?
More Query from same tag
- How to make react router inside of another router?
- How to separate items from array?
- How can i clear my input when i'm submit my event (reactJs app)
- Modify the markup for markers on the SVG map
- functions passed as props are invoked regardless
- Centering Modal Title and button in React Bootstrap
- Can't resolve 'react-native' in 'react-native-vector-icon'
- Why after switching views, React-Leaflet map grayed out? It happens after interaction with the map and then switching between views
- React bind function to each item inside array
- Css classname not applied to react component
- Using onClick to remove item from one array and place in another in React
- Changing HTML tag with Props in React JS
- Testing Apollo Mutation graphql errors
- MUIDataTable 'customBodyRender' error
- React useState item seems to be empty when called even though item is set
- How properly to extend a JS class loaded from an external site in React
- I was using a <Image /> tag in Next.js using a link of an image and it was showing an error
- Constructor runs once in multi-Instantiates of a class in "builder pattern" in react app
- Add class to siblings when Component clicked in React
- Changing pin format to date in Ion Range Ionic 5
- How do i make a GET requests from Imgur's API via Axios on my react app
- How to overwrite sass variable of a react library
- Prop change not triggering useEffect
- React lazy import from cdn
- React event listeners on array of elements
- React JS - How do I optimize render code?
- React App: Map within HashRouter is having issues iterating the component
- Fetching remote data multiple times based on user choice within a page
- React - onClick event not working correctly
- Component doesn't re-render after I set state