How to make other button functions automatically run when a button is clicked

Question

I clicked the Button and executed the onClickUserId function.
Then, if I run this function, I want to run the onClickListContent Button function as well. I don't know what to do.

I want to display the argument value in the console.log so that onClickListContent is automatically clicked when the onClickUserId value is clicked.


const onClickUserId = (id) => {
    console.log(id)
  }


const onClickListContent = (Content) => {
    console.log(Content);
};

return (
    <div>

    <>
    <div>
    <button onClick={() => onClickUserId(3)}>click</button>
    </div>
    </>

    <>
    <div>
    <button onClick={() => onClickListContent(6)}>click</button>
    </div>
    </>

    </div>
)

I tried to put the onClickListContent.click() function in the onClickUserId function, but it cannot be executed because of the argument value. How should I write the code?

check this [link](https://stackoverflow.com/questions/39913863/how-to-manually-trigger-click-event-in-reactjs) — Mohammad Salehi, Apr 15 '22 at 09:22
@MohammadSalehi It seems that the content is not the same as mine. — minsu123, Apr 15 '22 at 09:48

score 1 · Accepted Answer · answered Apr 15 '22 at 09:50

import {useRef} from 'react'
export default function App() {
  const ref = useRef()
  const onClickUserId = (id) => {
    console.log(id);
    ref.current.click();
  };

  const onClickListContent = (Content) => {
    console.log(Content);
  };

  return (
    <div>
      <>
        <div>
          <button onClick={() => onClickUserId(3)}>click</button>
        </div>
      </>

      <>
        <div>
          <button ref={ref} onClick={() => onClickListContent(6)}>click</button>
        </div>
      </>
    </div>
  );
}

you can create a reference to that button and use it trigger the click function.

score 1 · Answer 2 · answered Apr 15 '22 at 09:54

use react useRef() hook:


const listContentBtn = useRef(null);

const onClickUserId = (id) => {
    console.log(id)
    listContentBtn.current.click()
  }


const onClickListContent = (Content) => {
    console.log(Content);
};

return (
    <div>

    <>
    <div>
    <button onClick={() => onClickUserId(3)}>click</button>
    </div>
    </>

    <>
    <div>
    <button onClick={() => onClickListContent(6)} ref={listContentBtn}>click</button>
    </div>
    </>

    </div>
)

How to make other button functions automatically run when a button is clicked

2 Answers2