Problems with the UseState hook typing - reactjs

Question

I'm trying to put useState hook values to a component via props.
As I understand typescript complains that I didn't specify setActive to boolean type. Am I right? If so, how can I do it?
const Card = () => {
const [activeModal, setActiveModal] = useState<boolean>(false)
return (
<>
<ApproveModal active={activeModal} setActive={setActiveModal} />
<div className="card">
<div className="card-wrapper">
<div className="card-header">
<div className="card-header-left">
<img src={token} alt="token" />
<div className="card-header-info-tag">
<h1>WETH-WBNB LP</h1>
<p>Auto-Compounding</p>
</div>
</div>
<div className="card-header-right">
<p>Pancake</p>
<img src={pancake} alt="pancake" />
</div>
</div>
<div className="card-info">
<div className="card-info-item">
<div className="card-info-item-title">Staked</div>
<div className="card-info-item-value">$482.22K</div>
<div className="card-info-item-description">39595 LPs</div>
</div>
<div className="card-info-item">
<div className="card-info-item-title">APY</div>
<div className="card-info-item-value">365%</div>
<div className="card-info-item-description">Daily: 2.00%</div>
</div>
<div className="card-info-item">
<div className="card-info-item-title">TVL</div>
<div className="card-info-item-value">$482.22K</div>
<div className="card-info-item-description">39595 LPs</div>
</div>
</div>
<div className="card-button" onClick={() => setActiveModal(!activeModal)}>Approve</div>
</div>
</div>
</>
)
}
"text to fix little text problem"
"text to fix little text problem"
"text to fix little text problem"
And ApproveModal
interface ApproveModalProps {
active: boolean;
setActive: boolean;
}
const ApproveModal = ({active, setActive}: ApproveModalProps) => {
return (
<div className="modal">
<div className="modal-content">
<div className="modal-header">
<img src={modalLogo} alt="modalLogo" />
<div className="modal-header-info">
<div className="modal-header-info-title">WETH-WBNB LP</div>
<div className="modal-header-info-description">Auto-Compounding</div>
</div>
<div className="modal-header-info-swap">#PancakeSwap</div>
<img src={closeIcon} alt="closeIcon" className="close-button" />
</div>
<div className="modal-actions">
<div className="modal-actions-buttons">
<div className="deposit">Deposit</div>
<div className="withdrow">Withdrow</div>
</div>
</div>
<div className="modal-balance">
<div className="modal-balance-header">
<div className="modal-balance-header-left">
<div className="balance">Balance</div>
<div className="link">Create LP</div>
</div>
<div className="modal-balance-header-right">
<img src={updateIcon} alt="updateIcon" />
<div className="value">0.0000</div>
<div className="value-description">($0.00)</div>
</div>
</div>
<div className="balance-input">
<input type="text" />
<div className="input-button">MAX</div>
</div>
</div>
<div className="modal-info">
<div className="modal-info-apy">
<div className="modal-info-apy-title">APY</div>
<div className="modal-info-item">
<div className="apy-value">365%</div>
<div className="apr-value">APR: Swap 70.9% + GROW 73.5%</div>
</div>
</div>
<div className="modal-info-contact">
<div className="modal-info-contact-title">Contact</div>
<div className="modal-info-item">
<div className="contact-link">View on BScScan</div>
<div className="contact-address">oxAD6bD158869a97219447cf63b090</div>
</div>
</div>
<div className="modal-button">Approve</div>
<h1>No deposit free. No withdraw free.</h1>
</div>
</div>
</div>
)
}
Here is the code

Answer 1

The problem lies in your Card component. The error is saying that the setActive prop expects to receive a boolean value, but you are providing it with a function.
It should be expecting a function. You’ll want to change the props types on your Card such that setActive is a function whose argument is a boolean.
interface CardProps {
setActive: (active: boolean) => void;
…
If you want to be able to use a prevState callback when calling setActive inside the Card component, then you can use the exact type of your setActiveModal function, which is this:
interface CardProps {
setActive: React.Dispatch<React.SetStateAction<boolean>>;
…