Accessing HTML elements inside a React component

Question

I have a React component InputComponent which I cannot edit, and I would like to get a reference to one of its inner divs. (for example for the purpose of focusing on the input field).

const RefsExamplePage = () => {

    return (
        <div>

            <div>
                <InputComponent
                title="Test component"
                ></InputComponent>
            </div>

        </div>

    )
}

export default RefsExamplePage;

How do I achieve this?

if you ca't edit; check if its children have a specific classname or id to pick them by that; or if nothing special found; re-Implement this simple component your self with proper ref passed to its children — Mechanic
– Mechanic, Commented Feb 27, 2020 at 11:42
I think you might have an X Y problem here. Perhaps instead of stating that you need to edit it tell us what you would like to achieve at a higher level. — Joe Lloyd
– Joe Lloyd, Commented Feb 27, 2020 at 11:45

Vencovsky · Accepted Answer · 2020-02-27 11:38:38Z

2

which I cannot edit

If you can't edit it, the only thing you can do is pass ref to it and hope the InputComponent have refs implemented.

e.g.

const RefsExamplePage = () => {

    // use inputRef.current to access the input reference
    const inputRef = React.useRef()    

    return (
        <div>

            <div>
                <InputComponent
                    ref={inputRef}
                    title="Test component"
                />
            </div>

        </div>

    )
}

If this doesn't work or give you some error, you will need to modify the InputComponent

answered Feb 27, 2020 at 11:38

Vencovsky

32.1k25 gold badges132 silver badges202 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sirwan Afifi · Accepted Answer · 2020-02-27 12:02:27Z

1

If InputComponent doesn't provide ref you can wrap its parent (the div container) then set ref for it:

import React, { useRef } from "react";

const RefsExamplePage = () => {
    const container = useRef();
    return (
        <div>

            <div ref={container}>
                <InputComponent
                title="Test component"
                ></InputComponent>
            </div>

        </div>

    )
}

export default RefsExamplePage;

Then you can access the child element through the div's ref.

answered Feb 27, 2020 at 12:02

Sirwan Afifi

10.8k14 gold badges67 silver badges111 bronze badges

Comments

Jai · Accepted Answer · 2020-02-27 11:49:40Z

0

Use useRef() to create a ref to the component itself. This way you can get the components reference and you can use .current property of it to get the underlying DOM:

const RefsExamplePage = () => {

    const inputRef = useRef();

    const getInput = e => {
       // here get the any dom node available
       inputRef.current.querySelector('input').focus();
    };

    return (....
           <InputComponent 
             ref={inputRef} 
             onClick={getInput} 
             title="Test component"/> // <---if no child are passed change to self closing
        ....)
}

edited Feb 27, 2020 at 11:49

answered Feb 27, 2020 at 11:44

Jai

74.8k12 gold badges77 silver badges104 bronze badges

Collectives™ on Stack Overflow

Accessing HTML elements inside a React component

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related