State does not change via redux when default props is assigned

Question

I'm using redux in my react project. I set initial state in my reducer

const initialState = {
  isWarning: false,
};

and I have default props in my react component

LoginView.defaultProps = {
  warning: false,
};

and of course I'm destructuring my props in render method

const { warning } = this.props;

here you have code from my component

import React, { Component } from 'react';
import styled from 'styled-components';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import axios from '../../axios';
import Input from '../Input/Input';
import LoggedIn from '../LoggedIn/LoggedIn';
import * as actions from '../../store/actions';

const StyledWrapper = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
`;

const StyledTitle = styled.p`
  color: #727272;
  margin: 89px 0 73px 0;
  font-size: 24px;
`;

const StyledButton = styled.button`
  border: none;
  border-radius: 6px;
  background: #1de278;
  height: 48px;
  width: 397px;
  color: #fff;
  font-size: 18px;
  cursor: pointer;

  &:active,
  &:focus {
    outline: none;
  }
`;

class LoginView extends Component {
  state = {
  email: '',
  password: '',
};

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

onSubmit = (email, password) => {
  axios
    .post('api/v1/session', {
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
      },
      email,
      password,
    })
    // eslint-disable-next-line react/destructuring-assignment
    .then(() => this.props.history.push('/'))
    .catch(() => this.props.onLoginError(true));
};

render() {
  const { email, password } = this.state;
  const { warning } = this.props;
  return (
    <StyledWrapper>
      {console.log(warning)}
      <StyledTitle>Log in</StyledTitle>
      <Input id="email" placeholderText="Email address" 
          setInputValue={this.onType} />
      <Input
        id="password"
        placeholderText="Password"
        setInputValue={this.onType}
        type="password"
      />
      <LoggedIn />
      <StyledButton onClick={() => this.onSubmit(email, 
        password)}>Login</StyledButton>
    </StyledWrapper>
  );
}
}

const mapStateToProps = state => {
  return { isWarning: state.login.isWarning };
};

const mapDispatchToProps = dispatch => {
  return {
    onLoginError: state => dispatch(actions.setErrorLogin(state)),
  };
};

LoginView.propTypes = {
  warning: PropTypes.bool,
};

LoginView.defaultProps = {
  warning: false,
};

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(LoginView);

Redux dev tools shows my updated state from false to true, but my warning have false value. In my opinion it's something with default props. Do you have any ideas what could be a problem?

In one spot you use warning in another you are using isWarning. Try making them the same. Your mapStateToProps is mapping to this.props.isWarning. Change defaultProps to isWarning as well as your destructuring statement. — Alexander Staroselsky

Hassan Nemir Hassan Nemir · Accepted Answer · 2019-05-24T20:24:46

The problem is here:

const mapStateToProps = state => {
  return { isWarning: state.login.isWarning };
};

it's supposed to be

const mapStateToProps = state => {
  return { warning: state.login.isWarning };
};

Because the component can't find a warning prop it sets it to the default value, so you have to give it the same name.

State does not change via redux when default props is assigned

1 Answers