I'm performing the change password option with react-redux-firestore. Password changing is working fine if everything entered is correct. If any authentication error receive, error is dispatched and that should be displayed to the user. Whenever authentication error received I was handling it as follows to show error message within render

```
{authError ? this.openSnackbar({ message: '{authError}' }) : null}

```

but this makes a infinite loop.

Later added componentDidMount() method. This will prevent from looping through, but I'm not able to show the error message. 

```
    componentDidMount = () => {
        const { authError } = this.props;
        console.log(authError)
        if (authError) {
            this.setState(
                {
                    loading: false,
                    message: '{authError}',
                    open: true
                },
                () => {
                    alert(this.state.open);
                }
            )
        }

    };

```

when I do console.log(authError).. it's not showing the error message.

on button click how can I show the error message?

Any help Appreciated.

change password component

```
import React, { Component } from 'react'
import { Redirect } from 'react-router-dom'
import IconButton from '@material-ui/core/IconButton';
import { connect } from 'react-redux'
import { compose } from 'redux'
import { changePassword } from '../../store/actions/auth'

const styles = {

    textField: {
        fontSize: '5px'
    },

};

class ChangePassword extends Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: false,
            open: false,
            message: '',
            cp_currentPassword: '',
            cp_newPassword: '',
            cp_confirmPassword: ''
        }
    }
    componentDidMount = () => {
        const { authError } = this.props;
        console.log('did mount called')
        console.log(authError)
        if (authError) {
            this.setState(
                {
                    loading: false,
                    message: '{authError}',
                    open: true
                },
                () => {
                    alert(this.state.open);
                }
            )
        }

    };
    handleChange = (e) => {
        this.setState({
            [e.target.id]: e.target.value
        })
    }

    openSnackbar = ({ message }) => {
        this.setState({
            open: true,
            message
        });
    };
    handleSubmit = (e) => {
        e.preventDefault();
        let curpass = this.state.cp_currentPassword
        let newpass = this.state.cp_newPassword
        this.setState({ loading: true });
        this.props.changePassword(curpass, newpass, this.passwordUpdated)
    }
    passwordUpdated = () => {
        this.setState({
            message: 'Password changed Successfully.!',
            open: true,
            loading: false
        });
    };

    render() {
        const { classes, auth, authError } = this.props;

        console.log(authError)
        const { loading } = this.state;
        const message = (
            <span
                id="snackbar-message-id"
                dangerouslySetInnerHTML={{ __html: this.state.message }}
            />
        );
        if (!auth.uid) return <Redirect to='/signin' />
        return (
            <div>
                {/* {authError ? this.openSnackbar({ message: '{authError}' }) : null} */}

                <GridContainer>
                    <GridItem xs={12} sm={12} md={12}>

                        <Card>
                            <CardHeader color="warning">
                                <h4 className={classes.cardTitleWhite}>Change Password</h4>
                            </CardHeader>
                            <form >
                                <GridContainer>
                                    <GridItem xs={12} sm={12} md={6}>
                                        <CardBody>
                                            <GridContainer>
                                                <GridItem xs={12} sm={12} md={12}>

                                                    <TextField
                                                        id="cp_currentPassword"
                                                        label="Current Password"
                                                        type="password"
                                                        fullWidth
                                                        className={classes.textField}
                                                        value={this.state.cp_currentPassword}
                                                        onChange={this.handleChange}
                                                        margin="normal"
                                                        required={true}
                                                    />
                                                </GridItem>

                                                <GridItem xs={12} sm={12} md={12}>
                                                    <TextField
                                                        id="cp_newPassword"
                                                        label="New Password"
                                                        type="password"
                                                        fullWidth
                                                        className={classes.textField}
                                                        value={this.state.cp_newPassword}
                                                        onChange={this.handleChange}
                                                        margin="normal"
                                                        required={true}
                                                    />
                                                </GridItem>
                                                <GridItem xs={12} sm={12} md={12}>
                                                    <TextField
                                                        id="cp_confirmPassword"
                                                        label="Confirm Password"
                                                        type="password"
                                                        fullWidth
                                                        className={classes.textField}
                                                        value={this.state.cp_confirmPassword}
                                                        onChange={this.handleChange}
                                                        margin="normal"
                                                        required={true}
                                                    />
                                                </GridItem>
                                            </GridContainer>

                                        </CardBody>
                                        <CardFooter>

                                            <Button color="warning" onClick={(e) => this.handleSubmit(e)} disabled={loading}>
                                                {loading && <CircularProgress style={{ color: 'white', height: '20px', width: '20px', marginRight: '10px' }} />}
                                                Change Password
                      </Button>
                                        </CardFooter>
                                    </GridItem>
                                </GridContainer>
                            </form>
                        </Card>

                    </GridItem>

                </GridContainer>

                <Snackbar
                    open={this.state.open}
                    anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
                    message={message}
                    variant="error"
                    onClose={() => this.setState({ open: false, message: '' })}
                    action={
                        <IconButton
                            key="close"
                            aria-label="Close"
                            color="inherit"
                            className={classes.close}
                            onClick={() => this.setState({ open: false, message: '' })}
                        >
                            <CloseIcon className={classes.icon} />
                        </IconButton>
                    }
                    autoHideDuration={3000}
                />
            </div>
        )
    }
}
const mapstateToProps = (state) => {
    return {
        auth: state.firebase.auth,
        authError: state.authroot.autherr
    }
}
const mapDispatchtoProps = (dispatch, getState) => {
    return {
        changePassword: (currentPassword, newPassword, passwordUpdated) => { dispatch(changePassword(currentPassword, newPassword, passwordUpdated)) }
    }
}
export default compose(
    withStyles(styles),
    connect(mapstateToProps, mapDispatchtoProps)
)(ChangePassword);

```

auth action

```
export const changePassword = (currentPassword, newPassword, func) => {
    return (dispatch, getState, { getFirebase }) => {
        const firebase = getFirebase();
        var user = firebase.auth().currentUser;
        var cred = firebase.auth.EmailAuthProvider.credential(
            user.email, currentPassword);
            // reauthenticateAndRetrieveDataWithCredential 
        user.reauthenticateWithCredential(cred)
            .then(() => {
                user.updatePassword(newPassword).then(() => {
                    console.log("Password updated!");
                    func();
                }).catch((error) => { dispatch({ type: 'CHANGEPASSWORD_ERR', error }) });
            }).catch((error) => {
                dispatch({ type: 'CHANGEPASSWORD_CURRPSW_ERR', error })
            });

    }
}

```

auth reducer

```
 case 'CHANGEPASSWORD_SUCCESS':
            return {
                ...state,
                 //action.func

            };  
            case 'CHANGEPASSWORD_CURRPSW_ERR':
            return {
                ...state,
                autherr: action.error.message

            };  
            case 'CHANGEPASSWORD_ERR':
                return {
                    ...state,
                    autherr: action.error.message

                };  

```