[Resolved] Glitch starter project React Router Redux HELP!

Glitch Help
1

In the Glitch starter project for React Redux, the following code works as a stateless component. See here: https://glitch.com/edit/#!/starter-react-redux?path=app/components/VoteButtons.jsx:1:0

const React = require('react');

/* takes a prop 'label' and gets the other props from store via VoteContainer 
  and returns a div containing the label, vote buttons, and vote summary */
const VoteButtons = function({ label, onUpvote, onDownvote, voteScore, voteCount }) {
  return (
    <div>
      
      <h2>{label}</h2>

      <button alt="upvote" onClick={onUpvote}>&uarr;</button> &nbsp;
      <button alt="downvote" onClick={onDownvote}>&darr;</button>
      
      <p>Score: {voteScore || 0} out of {voteCount || 0 } total votes!</p>

    </div>
  );
}

module.exports = VoteButtons;

However, when I take the exact same code and put it in a stateful component, as below, it stops working:

const React = require('react');

/* takes a prop 'label' and gets the other props from store via VoteContainer 
  and returns a div containing the label, vote buttons, and vote summary */
class VoteButtons extends React.Component {
  constructor({ label, onUpvote, onDownvote, voteScore, voteCount }) {
    super({ label, onUpvote, onDownvote, voteScore, voteCount });
  }
  render() {
    return (
      <div>

        <h2>{label}</h2>

        <button alt="upvote" onClick={onUpvote}>&uarr;</button> &nbsp;
        <button alt="downvote" onClick={onDownvote}>&darr;</button>

        <p>Score: {voteScore || 0} out of {voteCount || 0 } total votes!</p>

      </div>
    );
  }
}

module.exports = VoteButtons;

onUpvote, onDownvote, voteScore and voteCount are not defined.

How can I make the code that works in a stateless component work with a React stateful component?

2

Just got the solution for anyone else struggling:

const React = require('react');
/* takes a prop 'label' and gets the other props from store via VoteContainer 
  and returns a div containing the label, vote buttons, and vote summary */
class VoteButtons extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>

        <h2>{this.props.label}</h2>

        <button alt="upvote" onClick={this.props.onUpvote}>&uarr;</button> &nbsp;
        <button alt="downvote" onClick={this.props.onDownvote}>&darr;</button>

        <p>Score: {this.props.voteScore || 0} out of {this.props.voteCount || 0 } total votes!</p>

      </div>
    );
  }
}

module.exports = VoteButtons;
1 Like