Issue with React.Portal ?

[natalie-natsu]

I'm trying to make a sign in button like in this code:

renderSignInButton() {
        const { credentials, dispatch, profile, t } = this.props;
        const { token } = credentials;

        if (token) {
            if (profile.isFetching) {
                return (
                    <button type="button" disabled>
                        <FontAwesomeIcon icon={faSpinner} spin />
                        {t('form:signIn.state.isFetching')}
                    </button>
                );
            }

            return (
                <button type="button" onClick={() => dispatch(signOut())}>
                    <FontAwesomeIcon icon={faSignOutAlt} />
                    {t('form:signIn.button.signOut')}
                </button>
            );
        }

        return (
            <button type="button">
                <FontAwesomeIcon icon={faSignInAlt} />
                {t('form:signIn.button.default')}
            </button>
        );
    }

But when the props are updated and the button is rerendered with a different icon, the code differs from the page:

You see, the React Dev Tools is showing faSignOutAlt and faSpinner icon is displayed on the page.

I'm using React.Portal feature to render this button. Don't know what to do.

[danawoodman]

Unfortunately this doesn’t have to do with react-fontawesome since it is just a simple component.

It looks like you’re passing an object to icon which is not how you use this component. Do you have a wrapper around react-fontawesome? If so, what does that look like? Can you send a minimal test example that reproduces this behavior?

Closing since this isn’t a react-fontawesome issue afaik.

[natalie-natsu]

I was wondering why you said that I was passing an object to icon. It's because I confounded your repo with the FontAwesome 5 repo for React. Conclusion: I'm a dumb person and sorry for the trouble. x)

[danawoodman]

Haha, that would do it 😜 glad you figured it out 👌