Random Color Picker-React project not working

Hi there, I’m having issues the this project, it was working fine until the last step and I realised the button won’t render a random color. I’ve been checking each line and honestly cannot figure out what is wrong with it. Any help will be greatly appreciated! Thank you!

Link to the project: Random color picker React project
Below is my code

Random.js

import React from "react";
import ReactDOM from "react-dom";
import { Button } from "./Button";

class Random extends React.Component {
  constructor(props) {
    super(props);
    this.state = { color: [4, 100, 221] };
    this.handleClick = this.handleClick.bind(this);
  }
  
  componentDidMount() {
    this.applyColor();
  }

  componentDidUpdate(prevProps, prevState) {
    this.applyColor();
  }

  formatColor(ary) {
    return "rgb(" + ary.join(", ") + ")";
  }

  isLight() {
    const rgb = this.state.color;
    return rgb.reduce((a, b) => a + b) < 127 * 3;
  }

  applyColor() {
    const color = this.formatColor(this.state.color);
    document.body.style.background = color;
  }

  chooseColor() {
    const random = [];
    for (let i = 0; i < 3; i++) {
      random.push(Math.floor(Math.random() * 256));
    }
    return random;
  }
handleClick() {
    this.setState({
      color: this.chooseColor()
});
  }
  render() {
    return (
      <div>
        <h1 className={this.isLight() ? "white" : "black"}>
          Your color is {this.formatColor(this.state.color)}.
        </h1>
        <Button light={this.isLight()} onCLick={this.handleClick}/>
      </div>
    );
  }
}

ReactDOM.render(<Random />, document.getElementById("app"));

Button.js

import React from 'react';

export class Button extends React.Component {
	render() {
		return (
			<button 
				className={ this.props.light ? 'light-button' : 'dark-button'} onClick={this.props.onClick}>
				Refresh
			</button>
		);
	}
}

Hey there,
is there an onClick props? Might be in the parent component, but I see a handleClick method that isn’t used but probably supposed to be used for the onClick handler on the button.

Hey @mirja_t so there is handleClick method used in the Button component within the render() for class Random.
onClick props has been added as props in the same Button component.

ok it’s just a typo in the parent component: onCLick

1 Like

Oops such a dumb mistake, @mirja_t thanks for pointing out! Changed it but the code is still not working. The button doesnt do anything. Any idea why?

Sorry, no. Once the typo is corrected, everything is working fine for me.

Thanks a lot for the help, its working fine for me as well now.

1 Like