I have two ponents Star and StarRating(Trying to implement example from book React and Redux, page 135). So I want to render any star and do some actions on click of one star. So, I tried to add console.log in onClick, but it didn't work. Can you help me to fix code and explain why it doesn't work?

StarRating.js

import React from "react";
import Star from "./Star";
import { Component } from "react";

class StarRating extends Component {
  displayName: "star-rating";

  constructor(props) {
    super(props);
    this.state = {
      totalStars: 5,
      starsSelected: 2
    };
    this.change = this.change.bind(this);
  }

  change(starsSelected) {
    console.log(starsSelected);
    this.setState({ starsSelected });
  }

  render() {
    const  totalStars  = 5;
    const { starsSelected } = this.state;
    console.log({ totalStars });
    return (
      <div className="star-rating">
        {[...Array(totalStars)].map((n, i) => {
          return (
            <Star
              key={i}
              selected={i < starsSelected}
              onClick={() => this.change(i + 1)}
            />
          );
        })}
      </div>
    );
  }
}

export default StarRating;

Star.js

import React from "react";
import { withStyles } from "material-ui-next";

const styles = {
  star: {
    cursor: "pointer",
    height: 25,
    width: 25,
    margin: 2,
    float: "left",
    backgroundColor: "grey",
    clipPath: `polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);`
  },
  selected: {
    cursor: "pointer",
    height: 25,
    width: 25,
    margin: 2,
    float: "left",
    backgroundColor: "green",
    clipPath: `polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);`
  }
};

const Star = ({ selected = true, classes }) => {
  return <div className={selected ? classes.selected : classes.star} />;
};

export default withStyles(styles)(Star);

.

I have two ponents Star and StarRating(Trying to implement example from book React and Redux, page 135). So I want to render any star and do some actions on click of one star. So, I tried to add console.log in onClick, but it didn't work. Can you help me to fix code and explain why it doesn't work?

StarRating.js

import React from "react";
import Star from "./Star";
import { Component } from "react";

class StarRating extends Component {
  displayName: "star-rating";

  constructor(props) {
    super(props);
    this.state = {
      totalStars: 5,
      starsSelected: 2
    };
    this.change = this.change.bind(this);
  }

  change(starsSelected) {
    console.log(starsSelected);
    this.setState({ starsSelected });
  }

  render() {
    const  totalStars  = 5;
    const { starsSelected } = this.state;
    console.log({ totalStars });
    return (
      <div className="star-rating">
        {[...Array(totalStars)].map((n, i) => {
          return (
            <Star
              key={i}
              selected={i < starsSelected}
              onClick={() => this.change(i + 1)}
            />
          );
        })}
      </div>
    );
  }
}

export default StarRating;

Star.js

import React from "react";
import { withStyles } from "material-ui-next";

const styles = {
  star: {
    cursor: "pointer",
    height: 25,
    width: 25,
    margin: 2,
    float: "left",
    backgroundColor: "grey",
    clipPath: `polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);`
  },
  selected: {
    cursor: "pointer",
    height: 25,
    width: 25,
    margin: 2,
    float: "left",
    backgroundColor: "green",
    clipPath: `polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);`
  }
};

const Star = ({ selected = true, classes }) => {
  return <div className={selected ? classes.selected : classes.star} />;
};

export default withStyles(styles)(Star);

.

• javascript
• reactjs

• Your Star ponent doesn't use the onClick you're passing to it – haim770 Commented Apr 15, 2018 at 13:45
• P.S. be wary about using the array index as the key when rendering arrays. it's fine in some instances, but in others can cause issues. – Jayce444 Commented Apr 15, 2018 at 13:46

1 Answer 1

There is no onClick handler inside of Star ponent, your should pass handle in ti there:

const Star = ({ selected = true, classes, onClick }) => {
  return <div onClick={onClick} className={selected ? classes.selected : classes.star} />;
};