Getting error when destructure value from state in TypeScript

Question

When I tried to destructure the notification_menu value am getting the error like this

am using Redux for state management

import React, { Suspense,Component } from 'react';
import { Switch, Route } from "react-router-dom";
import { connect } from 'react-redux';
import { NotificationMenu } from "./Redux/NotificationMenu/nof_selector";
 class App extends Component {
  state = {
    navOpen: false,
  };
  NavCall = () => {
    this.setState({ navOpen: !this.state.navOpen });
  };
   render() {
     console.log(this.props.notification_menu);
    const { navOpen } = this.state;
    const NavOpenStyleMargin = navOpen ? { marginLeft: "250px" } : {};
    return (
      <div>
    </div>
    )
  }
}
const mapStateToProps = (state:any) => {
  return {
    // userID: selectCurrentUser(state),
    // account_menu: AccountMenu(state),
    notification_menu: NotificationMenu(state),
  };
};
export default connect(mapStateToProps,null)(App);

Consider avoiding any to make errors more explicit - any kinda defeats the purpose of using TS — CertainPerformance
– CertainPerformance, Commented Dec 28, 2020 at 18:49

Rafael Buzatto de Campos · Accepted Answer · 2020-12-28 19:01:51Z

1

when using typescript you need to declare props and state types to your class component like:

interface IProps {
  notification_menu: string // define what type notification_menu is
}

interface IState {
  navOpen: boolean
}

class MyComponent extends React.Component<IProps, IState> {
  // code here
}

answered Dec 28, 2020 at 19:01

Rafael Buzatto de Campos

10.5k6 gold badges29 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Getting error when destructure value from state in TypeScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related