Problems with the UseState hook typing

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>>;
…