tengo una lista de opciones

 const values = [ { firstName: 'John', id: 'text' }. { userId: 123, id: 'number' } ];

La lógica es que el usuario seleccione uno de los valores (firstName) y se generará un campo de entrada del tipo 'string'. Si el usuario selecciona ID de usuario, se generará una entrada de texto del tipo 'int'. Necesito crear una lógica en la que el usuario pueda seleccionar otra opción del menú desplegable y se genere un campo de texto. Por ejemplo, si la opción seleccionada es Verdadero u otro número y debe proporcionar un campo de texto booleano o entero. También estoy usando el asistente de inmutabilidad para actualizar el tipo, pero claramente no entendí mucho de los documentos oficiales. ¿Alguna idea sobre cómo implementar esto con reaccionar?

Aquí está mi función auxiliar de inmutabilidad.

 const setValueType = (type: string, index: number) => { if (index < 0 || index >= data.values.length) { return; } setValueData(update(data, { values: { [index]: { type: { $set: type } } } })); }; const setPlaceholder = (placeHolder: any, index: number) => { if (index < 0 || index >= data.values.length) { return; } setValueData(update(data, { values: { [index]: { placeHolder: { $set: placeHolder } } } })); }

Estoy usando la función 'setValueType' para actualizar el tipo y 'setPlaceHolder' para configurar un texto de visualización, tengo que pensar en una forma en la que agregaré nuevas opciones al menú desplegable, pero deberían mostrarse condicionalmente en función de el tipo.

Estoy pensando que tengo que pasar una condición if-else en la función 'setValueType', pero no estoy seguro de implementarla.