Accessing DOM Elements in React | kirupa.com

#1

by kirupa | 10 October 2016

There will be times when you want to access properties and methods on an HTML element directly. In our React-colored world where JSX represents everything that is good and pure about markup, why would you ever want to directly deal with the horribleness that is HTML? As you will find out (if you haven't already), there are many cases where dealing with HTML elements through the JavaScript DOM API directly is easier than fiddling with "the React way" of doing things.

This is a companion discussion topic for the original entry at http://www.kirupa.com/react/accessing_dom_elements.htm
#2

There was some data loss on the forums, so here is a question that was posted a few days ago by user madhuni:

Very nice article sir! I have been going through your articles on React for past 2 days and I have finished the Basics of React. I must say, it boosted my confidence to next level with regards to React. While going through this particular article I did this example in some modified way by creating a more nested parent-child relationship within the components. I was wondering how I can access the ref defined on the child-component, in the parent component.

Also, we have learned so far to communicate in a single direction means props flow from the Parent Component to the Child Component. I was wondering if I need to pass something from the Child Component to the Parent Component, how we can achieve that? As in this above case where the setNewColor is defined in the Parent Component and I need to access the _input element from the Child component where I defined the refs.

#3

@senocular replied:

@madhuni Generally you want to avoid ref when you can. If you can organize things so that you don’t need it, that is the preferred React approach. With this, it becomes doubly undesirable to start passing refs around between components. Components should be as self-contained as possible, allowing them to be composed with a minimal API managed through props.

Child communication with parents is handled through events. I can’t remember where this might be best explained in the tutorials, but there is an example in https://www.kirupa.com/react/events_in_react.htm - just do a page search for clickHandler for a kind of example of this. But the idea is that you can give a callback function to a component through a prop (e.g. clickHandler) and that component can call that function when it needs to send something out to whatever descendant set up the callback.

If there’s a certain problem you’re trying to solve, provide more detail and we can help you figure it out. :slight_smile:

1 Like
#4

Hi @kirupa, @senocular. Thanks for your reply. I don’t know how my account got deleted and was not able to see the notifications. I just made a new account.

Anyways, I have tried your solution to add a callback function in the Parent Component and pass the ref to that callback function through props and I was able to access the input field in my Parent Component as well. :slight_smile:

#5

The account getting deleted was an error on our end. Apologies for that. Glad it worked out :slight_smile:

1 Like
#6

Hi Kirupa, thanks for a wonderful article. Question, why not make the form and button their own components? That’s what I learned from your previous article that showed the graphic of every element on the page being its own component. thanks.

#7

You can totally do that. There is no right or wrong answer for when to break something into its own component or not. Our form element is very simple, and I grouped the button and the form element together as one logical grouping.