CODEWITHSUNDEEP
reduxreact-redux
Verric
Verric

Reputation: 1094

Props are undefined in redux component

Given the following component, which is structually similar to redux's demo component. My primary issue is that props is always undefined even if the state in the store is perfectly valid

Note: In the link I'm looking at the 'containers/AddTodo.js', if the link doesn't directly take you to the snippet

import React from 'react';
import { connect } from 'react-redux';
import Glyphicon from 'react-bootstrap/lib/Glyphicon';
import Label from 'react-bootstrap/lib/Label';


let HeaderContainer = ({props}) => { //props = undefined
  return(
    <div>

      <Label bsStyles="warning">
        <Glyphicon glyph="exclamation" />
      {props.openCount}
      </Label>

      <Label bsStyle="success">
        <Glyphicon glyph="ok" />
      {props.completedCount}
      </Label>

    </div>
  );
}

const mapStateToProps = (state) => {
  return {
    openCount: state.tasks.filter( task => !task.completed).length,
    completedCount: state.tasks.filter( task => task.completed ).length
  };
}

HeaderContainer = connect(mapStateToProps)(HeaderContainer);
export default HeaderContainer;

Upvotes: 0

Views: 148

Answers (1)

oobgam
oobgam

Reputation: 1309

Remove {} from the ({props}). If you want to use destructuring, try ({openCount, completedCount})

let HeaderContainer = (props) => //...

let HeaderContainer = ({openCount, completedCount}) => //..

Upvotes: 1

Related Questions