Why can't I display a let variable after changing it in a function?

Admin 1
Viewed 55

I'm currently trying to assign different objects to a let variable using if statements before displaying it. For some reason, assigning the object in a function will result in the variable displaying nothing instead of displaying the assigned object.

Let me give an example:

In the following code I am assigning 2 different icons to a let variable depending on a prop I passed from another file and the result matches exactly what I'm looking for.

    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>
        );
    }

However, if I was to re-attempt this same example with a combination of a function with the useEffect hook, the {icon} object displays nothing.

    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>
        );
    }

Right away, I can assume this is because the function is asynchronous. The let variable "icon" is being used before assigning it with an object. So a simple fix would be something such as the following:

     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>
        );
    }

But what if I want to re-assign the variable icon with a different object later on after a button is pressed. Simply assigning an object right away doesn't allow me to re-assign it later. What I would like to do is assign the object as needed. What am I missing? Am I passing the variable wrong or is this simply not possible?

react-native reactjs android javascript
1 Answers

The let variable doesn't make the page rerender after the assignment so the value is changed but the react component doesn't read it, use the useState hook instead for purposes like this, but I advise you to use conditional rendering for your case like this:

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' />);
        }
    };

    return (
        <View>{checkScreen()}</View>
    );
}
user_146025090
Related