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?
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.
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>
)