En mi aplicación React, tengo una API que toma templateID como parámetro y devuelve una lista de atributos/elementos para esa plantilla. Cada uno de ellos tiene, entre otras cosas, un tipo (input, datePicker, dropdown...) y por su tipo puedo representarlos dinámicamente en mi página.

Por ejemplo, si mi API devuelve:

 data=[{type:1,...},{type:9,...},{type:4,...},{type:4,...},{type:4,...}]

luego tengo que renderizar 1 entrada, 1 selección múltiple y 3 menús desplegables. Pero todo esto puede variar dependiendo de la plantilla. Los renderizo usando formularios como este:

 {tempAtr.map((data) => required={data.required=== 1 ? true : false} disabled={data.read_only === 1 ? true : false} name={data.name} component={ data.type=== 1 ?Input: data.type=== 2 ?Input: data.type=== 3 ?DatePicker: data.type=== 4 ?DropDownList: data.type=== 5 ?TextArea : data.type=== 6 ?DropDownList: data.type=== 7 ?DropDownList: data.type=== 8 ?MultiSelect: data.type=== 9 ?MultiSelect: Input} label={data.name} />)}

Mi pregunta es, ¿cuál es la mejor manera de manejar entradas dinámicas/desplegables/todo tipo de elementos? Por lo general, si tengo un menú desplegable, debo tener una función que maneje su valor y un useState que siempre tenga el estado actual. Pero no sé cómo hacerlo en una situación como esta en la que inicialmente no tengo la cantidad de elementos que estoy representando.