How can I call some code in another function after state change? - reactjs

Question

const App = (): JSX.Element => {
const [isShow, setIsShow] = useState(true)
useEffect(() => {
console.log(`is show: ${isShow}`)
},[isShow])
const handleClick = () => {
console.log('call setIsShow')
setIsShow(!isShow)
}
const onClick = () => {
$('.bt1').trigger('click') // click on the button with the class name is `bt1`
// call below code after state `isShow` change
console.log('hello world')
...
}
return (
<div>
<div className='container'>
<div style={{height: '200px', backgroundColor: 'red'}}/>
{isShow && <div className='green_container' style={{height: '200px', backgroundColor: 'green'}}/>}
<div style={{height: '200px', backgroundColor: 'blue'}}/>
</div>
<button onClick={handleClick} className='bt1'>Click...</button>
<button onClick={onClick}>GOGO</button>
</div>
);
};
on the above code, My action is...
click button GOGO
$('.bt1').trigger('click') is calling
function handleClick is calling for print message and change IsShow state
My Question is:
How can I print hello world and another command that below line $('.bt1').trigger('click') inside onClick function after state isShow change ?

Answer 1

Don't use jquery in react. use the ternary operator to show text in Jsx.
const App = (): JSX.Element => {
const [isShow, setIsShow] = useState(true)
const handleClick = () => {
setIsShow(!isShow)
}
const onClick = ()=>{
setIsShow(false)// if you want.
}
return (
<div>
<div className='container'>
<div style={{height: '200px', backgroundColor: 'red'}}/>
{isShow && <div className='green_container' style={{height: '200px', backgroundColor: 'green'}}/>}
<div style={{height: '200px', backgroundColor: 'blue'}}/>
</div>
<button onClick={handleClick} className='bt1'>Click...</button>
<button onClick={onClick}>{isShow ? "Hello World":"GOGO"}</button>
</div>
);
};

Answer 2

you can simply call handleClick in onClick funtion
sth like this:
const onClick = () => {
handleClick()
// call below code after state `isShow` change
console.log('hello world')
...
}
and use useEffect for listening to any change in isShow
if you only want to click on button you can use ref
I changed your code in any way that might be needed for you
take a look at this one:
import { useState, useRef, useEffect } from "react";
const App = () => {
const [isShow, setIsShow] = useState(true);
const btnRef = useRef();
useEffect(() => {
console.log(`is show: ${isShow}`);
}, [isShow]);
const handleIsShowChanged = () => {
console.log("hello world");
};
const handleClick = () => {
console.log("call setIsShow");
setIsShow((prevState) => {
handleIsShowChanged();
return !prevState;
});
};
const onClick = () => {
btnRef.current.click();
};
return (
<div>
<div className="container">
<div style={{ height: "200px", backgroundColor: "red" }} />
{isShow && (
<div
className="green_container"
style={{ height: "200px", backgroundColor: "green" }}
/>
)}
<div style={{ height: "200px", backgroundColor: "blue" }} />
</div>
<button ref={btnRef} onClick={handleClick} className="bt1">
Click...
</button>
<button onClick={onClick}>{isShow ? "Hello World" : "GOGO"}</button>
</div>
);
};
export default App;