score:4
for your approach, simply write
this.refs.tom
this.refs.julia
etc...
but note that this is considered legacy api, and you shouldn't use this any more.
a better way is
refscollection = {};
render() {
return (
<div>
{[...this.state.infos].map((info) => {
return <child
ref={(instance)=>{this.refscollection[info] = instance;}
/>
})}
</div>
);
}
react supports a special attribute that you can attach to any component. the ref attribute takes a callback function, and the callback will be executed immediately after the component is mounted or unmounted.
the callback receives the child dom element as the parameter, which you can then assign to a property in your parent component object. in the code above, notice how we assigned "instance" to "this.refscollection[info]"
of course in your case, because you defined the child component yourself, it's not really a standard html dom element, so the callback parameter is actually a mounted instance of your child component object.
and then you access the mounted component instances using:
this.refsarray['tom']
this.refsarray['julia']
for more information, see this link: https://reactjs.org/docs/refs-and-the-dom.html
Source: stackoverflow.com
Related Query
- How to use this.refs for a list of child components
- How can I use multiple refs for an array of elements with hooks?
- React: how to use child FormItem components without getting Warning: validateDOMNesting: <form> cannot appear as a descendant of <form>
- How redux work when multiple components use parts of complex objects for it's source
- How to use theme in styles for custom class components
- ReactJs How to access child components refs from parent
- ReactJS How do I use state hooks for a list of text changing buttons with a timeout?
- How to switch themes(light and dark) for all child components in a react application in blueprintjs v3?
- How to set same dynamic width of component child for all instances? Web Components
- Using css modules, how can I use composes to include a list of variables for colors
- How can I use multiple refs for nested arrays of elements with hooks, or any other way
- How to use router for switching between components with a key value pair in react
- How to use React for individual site components
- how to wait for child components rendered
- How to use theme colors for "color" prop used in MaterialUI components
- Each child in a list should have a unique "key" prop. How to know to use word "key" instead of "key2"
- React | Npm package - How can I export 2 components for use as an npm package
- Nextjs: How to use ContextAPI with multiple values all of which need to be updated from child components
- How to use theme in styles for custom functional components
- How to properly use refs in React functional components
- How do i use different css files for different components React with same class names
- How can I use a button to change the Theme for material UI on my site? this is where I am so far
- How to extract text input value and pass down that value down to a child component as a prop to use for fetching third part api data in React?
- How would I use setState for this particular example?
- How to use useRef() for multiple components and to scroll down to a specific component when user clicks
- How to use index and get rid of React Warning: Each child in a list should have a unique "key" prop?
- How can I get rid of this warning message?: Each child in a list should have a unique "key" prop
- How do I use React refs in a map for functional components?
- How can I use react router in nested page with "exact paramater" for my this scenario?
- React using refs for child components
More Query from same tag
- css - Video is only resizing on width change not on window height changes
- onmouseover show Message on React
- MobX autorun not working class component constructor
- react fetch send a pending response
- MaterialUI card view not showing
- Pass a parameter to a prop that is actually a component?
- React instance before rendering
- React with FlowRouter: How to show/hide component based on route
- No function call - onclick doesn't work react
- how to align the text vertically along with the div?
- ReduxForm - getting select value from Semantic-UI select input
- react-native-popup-menu MenuProvider typescript IntrinsicAttributes
- ReactJS Events from the EventListener Don't Update The View
- Authentication to serve static files on Next.js?
- App Service web app showing file structure instead of actual web apge
- Is it possible to redirect React app users from 127.0.0.1:3000 to localhost:3000?
- Moment js for displaying a timer in mm:ss format
- Gastby - ReactDOM: Target container is not a DOM element
- React Router: Multiple paths to one element
- React - using a callback function with useState Hook
- Reset The State on React JS
- Reactjs. Fetch data from server and connect it to i18n
- How to remove underline from font awesome icon
- react-router for navigating directory
- React-Router: Component is not rendered but URL changes
- Disconnection between action dispatch and reducer
- Is there a way to include the react-select dropdown near the body tag
- Creating multiple similar components with an array of data
- Click on a component to navigate to another page
- Redux: Passing a preloadedstate with combined reducer and store enhancer