0

Im trying to access props in componentDidMount method but its showing error as : 

Property 'addressInvalid' does not exist on type 'Readonly<Props> & Readonly<{ children?: ReactNode; }>'.

please refer following code:

import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import {
  withStyles,
  WithStyles,
  Theme,
  createStyles,
} from '@material-ui/core/styles';
import { applicantFormSubmit } from '../../auto/redux/actions';
import { get } from 'lodash';

interface AppState {
  details: string;
}

interface DispatchProps {
  applicantFormSubmit: (data: any) => void;
}

interface StateProps {
  applicant: {
    formLoader: boolean;
    addressInvalid: boolean;
    personal_details: Object;
    address: Object;
  };
  quote: {
    quoteCompleted: boolean;
  };
}

const styles = (theme: Theme) =>
  createStyles({
    icon: {
      fontSize: '35px',
    },
    continueSpinner: {
      color: 'white !important',
      marginBottom: '2px',
    },
  });

interface MyProps extends StateProps, DispatchProps {}

class TempComponent extends React.Component<MyProps, AppState> {
  componentDidMount() {
    //console.log('did mount this.props');
    //console.log(this.props); // showing all props properly
    //console.log(this.props.addressInvalid); //<-show Error as mentioned above
  }

  render() {
    return <div>Hello my name TempComponent</div>;
  }
}

const mapStateToProps = (state: StateProps) => {
  const {
    formLoader,
    addressInvalid,
    personal_details,
    address,
  } = state.applicant;
  const { quoteCompleted } = state.quote;

  return {
    formLoader,
    addressInvalid,
    personal_details,
    address,
    quoteCompleted,
  };
};

const mapDispatchToProps = (dispatchProp: any): DispatchProps => {
  return bindActionCreators(
    {
      applicantFormSubmit,
    },
    dispatchProp.dispatch
  );
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(withStyles(styles)<any>(TempComponent));
Sagar Ganesh
  • 2,454
  • 3
  • 20
  • 32
  • 1
    Am I missing something? It looks like the only prop defined in your interface is `name`. `addressInvalid` is listed as a nested state prop. What do you expect to happen? It seems like you just need to update the interface to include the data you're adding in `mapStateToProps` – Brian Thompson May 19 '20 at 16:50
  • try this.props.applicant.addressInvalid – Abhinab Rajopadhyaya May 19 '20 at 16:52
  • @BrianThompson thanks for reply, i have updated the code and added new interface called 'MyProps', here i just wanted to read the store props and update the local component state. But if i log this.props its showing all props properly but if i use '.' to access its throwing an error. I dont know why this is happening. – Sagar Ganesh May 19 '20 at 17:01
  • @AbhinabRajopadhyaya tried but thats not working – Sagar Ganesh May 19 '20 at 17:02
  • That is typescript error. Define all your props in your ```MyProps```(recommended) interface or use ```any```(not recommended) for quick solution – Abhinab Rajopadhyaya May 19 '20 at 17:19
  • 1
    Yeah the reason is because the props **are** actually there, but you have informed Typescript that they **should not** be there by leaving them out of the interface. So Typescript is erroring saying basically, "You are trying to access a prop that you said will not be present". – Brian Thompson May 19 '20 at 17:23
  • Also you can't just extend the `StateProps` and get it to work, because you have changed the shape of the data in `mapStateToProps`. – Brian Thompson May 19 '20 at 17:26
  • @BrianThompson yes, that's the main cause of problem because of improper shape of interface, i just corrected it and it works!!. I really appreciate your response and helping nature. Thanks again. – Sagar Ganesh May 20 '20 at 04:23
  • @AbhinabRajopadhyaya thanks for your reply. The issue was related to interface shape. – Sagar Ganesh May 20 '20 at 04:25

0 Answers0