Actualmente estoy tratando de asignar diferentes objetos a una variable let usando declaraciones if antes de mostrarla. Por alguna razón, asignar el objeto en una función dará como resultado que la variable no muestre nada en lugar de mostrar el objeto asignado.

Déjame dar un ejemplo:

En el siguiente código, estoy asignando 2 íconos diferentes a una variable let dependiendo de un accesorio que pasé de otro archivo y el resultado coincide exactamente con lo que estoy buscando.

 const BottomBar = ({ screen }) => { let icon; if (screen === 'Home') { icon = (<Entypo name='home' size={30} color='white'/>); } else { icon = (<SimpleLineIcons name='home' size={24} color='white'/>); } return ( <View>{icon}</View> ); }

Sin embargo, si volviera a intentar este mismo ejemplo con una combinación de una función con el gancho useEffect, el objeto {icon} no muestra nada.

 const BottomBar = ({ screen }) => { let icon; const checkScreen = () => { if (screen === 'Home') { icon = (<Entypo name='home' size={30} color='white'/>); } else { icon = (<SimpleLineIcons name='home' size={24} color='white'/>); } }; useEffect(() => { checkScreen(); }); return ( <View>{icon}</View> ); }

De inmediato, puedo asumir que esto se debe a que la función es asíncrona. El "icono" de la variable let se utiliza antes de asignarle un objeto. Entonces, una solución simple sería algo como lo siguiente:

 const BottomBar = ({ screen }) => { const checkScreen = () => { if (screen === 'Home') { return (<Entypo name='home' size={30} color='white'/>); } else { return (<SimpleLineIcons name='home' size={24} color='white'/>); } }; let icon = checkScreen(); return ( <View>{icon}</View> ); }

Pero, ¿qué pasa si quiero reasignar el ícono de la variable con un objeto diferente más adelante después de presionar un botón? Simplemente asignar un objeto de inmediato no me permite reasignarlo más tarde. Lo que me gustaría hacer es asignar el objeto según sea necesario. ¿Qué me estoy perdiendo? ¿Estoy pasando mal la variable o simplemente no es posible?