R Shiny - Dynamically adding dependent inputs using insertUI - r

Question

The app below contains an actionButton, Add, that inserts two inputs when clicked.
The first input is a selectInput with choices A and B. The second input is a textInput if the user selects A and a numericInput if they select B. I'm not sure how to capture this dependency.
I tried attaching an event handler (the second observeEvent in the code below) to each selectInput that listens to the value of that selectInput and renders the second input accordingly using renderUI. This doesn't work though. I am also wary about using a render function inside an observeEvent since I have read that using a render inside an observer is not good practice (not exactly sure why). It also looks messy.
The app:
library(shiny)
ui <- fluidPage(
actionButton('add', 'Add'),
div(id = 'placeholder')
)
server <- function(input, output, session) {
rv = reactiveValues(ctn = NULL)
observeEvent(input$add, {
rv$ctn = rv$ctn + 1
Id = function(id, ctn = rv$ctn) paste0(id, ctn)
insertUI(
selector = '#placeholder',
ui = div(
id = Id('div'),
selectInput(Id('letter'), 'Letter:', LETTERS[1:2]),
uiOutput(Id('input'))
)
)
observeEvent(Id('letter'), {
output[[Id('input')]] <- renderUI({
switch(
input[[Id('letter')]],
'A' = textInput(Id('text'), '', ''),
'B' = numericInput(Id('numeric'), '', '')
)
})
})
})
}
shinyApp(ui = ui, server = server)
The first UI chunk that is inserted works as expected - both inputs are rendered. However, in subsequent chunks (chunks 2 and 3 in the screenshot below) only the selectInput is rendered.
Here is a screenshot:

Answer 1

Below is a working code. The main problem was your ctn reactive value initialized to NULL, because NULL + 1 = numeric(0) and numeric(0) + 1 = numeric(0).
library(shiny)
ui <- fluidPage(
actionButton('add', 'Add'),
div(id = 'placeholder')
)
server <- function(input, output, session) {
ctn <- reactiveVal(0)
Id <- reactive({
function(id){
paste0(id, ctn())
}
})
observeEvent(input$add, {
ctn(ctn() + 1)
insertUI(
selector = '#placeholder',
ui = div(
id = Id()('div'),
selectInput(Id()('letter'), 'Letter:', LETTERS[1:2]),
uiOutput(Id()('input'))
)
)
})
observeEvent(ctn(), {
id <- Id()('input')
selection <- Id()('letter')
output[[id]] <- renderUI({
req(input[[Id()('letter')]])
switch(
input[[selection]],
'A' = textInput(Id()('text'), 'ENTER TEXT', ''),
'B' = numericInput(Id()('numeric'), 'ENTER NUMBER', '')
)
})
}, ignoreInit = TRUE)
}