Estoy trabajando en una aplicación en la que quiero representar un componente en función del valor que obtengo de la API. El valor devuelto es una cadena y puede tener un espacio en el medio. Así que hice un objeto (con datos de demostración para simplificar) que tiene claves como cadenas y valores como componentes como este

 const conditions = { First: {"one" : <Component1 />, "two": <Component2 />}, Second: { "var one": {"one": <Component3 />, "two": <Component5 />}, "var two": {"one": <Component4 />, "two": <Component8 />}, "var three": {"one": <Component7 />, "two": <Component5 />}, "var four": {"one": <Component2 />, "two": <Component1 />} }, Third: <Component6 />, Four: <Component7 />, Five: { "var six": <Component1 /> "var seven": <Component5 /> "var eight": <Component4 /> "varr nine": <Component7 /> "var ten": <Component8 /> "var eleven": <Component1 /> }, Six: <Component4/> }

Hasta ahora, he intentado usar una función recursiva que contiene un bucle for-in para iterar el objeto y verificar si el valor de la clave actual es un objeto o no, pero un componente también es un objeto, por lo que continúa en lugar de devolver el valor. es decir, el componente en sí. Y he intentado verificar si la clave del objeto de valor es una cadena, pero luego la primera clave del componente devuelto, que es $$typeof, también es una cadena.

 const getValue = (obj) => { for (const key in obj) { if (key === 'apiVariablestring') { if (Object.keys(obj[key])[0] === 'string') { getValue(obj[key]); } else { //should return component here but else will never run } } } }

No estoy seguro de que esta sea la mejor manera de hacerlo. No lo he hecho antes y soy nuevo cuando se trata de API. Si hay una mejor manera por favor dígame.

Mi salida esperada debe ser un componente que almacenaré en un estado de reacción usando el enlace useState. Entonces, por último, tendré una variable, digamos currentValue y podría representar {currentValue}

El valor devuelto por la API es algo como esto

 "something": [ { "id": 01, "main": "Second", "description": "var two", "stuff": "one" } ]

Y quiero hacer coincidir principal, descripción y esas cosas. Main es único, pero la descripción y otras cosas pueden ser iguales y repetidas en el objeto que hice.