Creating a component through useState used in another useState created component, not working

M12301 — Thu, 13 Aug 2026 07:13:32 +0000

Hi.

I have a web application which has popups shown depending on the user clicks. For the popups, I have a custom Component class, and to implement it, I add it as an array useState([]) inside the main page as "{popups}".

The above is working without issues, however, I am doing the same practice inside one of the popups, where I want to dynamically change the content, so inside one of the popup components, I am doing "{subscriptionArea}" which is already bound to a useState([]), however, it is not working this time.

const popupWindow = {
    id: "new_subscription_popup",
    titleText: "New subscription",
    zIndex: 1005,
    content: (<>
    <div style={{marginBottom: "20px", color: "#000"}}>
        {subscriptionArea}
    </div>
    </>)
}

updatePopup(prev => [...prev, popupWindow]);

When updating the "subscriptionArea" using its "set" function, nothing is changing in above popup:

let subArea: any;
switch(e.target.value) {
    case "Subscription1":
        subArea = <h1>Subscription type 1</h1>
        break;

    case "Subscription1":
        subArea = <h1>Subscription type 1</h1>
        break;
}

setSubscriptionArea([subArea])

Are there any restrictions for components generated using useState, and we can't recursively add dynamic components inside them?

Thanks!

DEV Community: M12301

Creating a component through useState used in another useState created component, not working