How to click programmatically a child component? react

Question

I have two components, the parent and child. Currently I have these codes below. But unfortunately it returns an error:

TypeError: Cannot read property 'click' of null

For some reasons I want when button is click the Item component also will be click. But these codes below produces an error above. Anyone does know how to achieve it? import React, { useRef } from 'react';

const App = (props) => {
  const itemRef = useRef(null);
  
  return (
    <div>
    {dynamicBoolean ? (
         <button onClick={() => itemRef.current.click()}>
            click item
        </button>
    ) : (
        //more codes here
        <Item ref={itemRef} />
    )}  
    </div>
  );
};

export default App;

Child component would look like below (demonstration purposes, the code is very lengthly)

import React from 'react';

const Item = (props) => {
  
  return (
    <div>
        //some design here
    </div>
  );
};

export default Item;

You forget to use useRef. That should be the trick. Functional components handle that differently than class components. reactjs.org/docs/… — Felix
– Felix, Commented Mar 31, 2021 at 7:01
Item will need to use forwardRef to forward the ref to the DOM element — thedude
– thedude, Commented Mar 31, 2021 at 7:03

Felix · Accepted Answer · 2021-03-31 07:07:18Z

6

You need useRef and you have to forward this ref to the Item component.

import React, { forwardRef, useRef } from 'react';

const Item = forwardRef((props, ref) => {
  return <li {...props}
  onClick={() => alert('clicked on Item')}
  ref={ref} >MyItem</li>
})

const App = (props) => {
  const itemRef = useRef(null);
  
  return (
    <div>
     <button onClick={() => itemRef.current.click()}>
        click item
    </button>
     
     
      <Item ref={itemRef} />
    </div>
  );
};

export default App;

answered Mar 31, 2021 at 7:07

Felix

2,71119 silver badges27 bronze badges

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

1 Comment

アリ・ナディム Over a year ago

I think this would solve my problem sir, but can't verify. Because current implementation is using conditional (see updated description), causing it to still display the same error.

pankaj kumar · Accepted Answer · 2021-03-31 07:16:54Z

1

import React, { createRef } from "react";

const Hello = (props) => {
  const itemRef = createRef();
  const hello = () => {
    itemRef.current.click();
  };
  return (
    <div>
      <button onClick={() => hello()}>click item</button>
      <Item ref={itemRef} />
    </div>
  );
};

const Item = React.forwardRef((props, ref) => {
  const myClick = () => {
    console.log("this is clicked");
  };
  return (
    <button ref={ref} className="FancyButton" onClick={myClick}>
      {props.children}
    </button>
  );
});

export default Hello;

answered Mar 31, 2021 at 7:16

pankaj kumar

714 bronze badges

1 Comment

pankaj kumar Over a year ago

You can use createRef , and then click that element as shown above. Cheers!

Collectives™ on Stack Overflow

How to click programmatically a child component? react

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related