Random color pickers button not showing 'Refresh'

danielfrith95 · February 20, 2023, 2:26pm

Can anyone tell me why Refresh is not appearing inside the button?

gist.github.com

https://gist.github.com/codecademydev/6bf2c649942592ea40e9841c6c2609c0

Button.js

import React from "react";

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

This file has been truncated. show original

Random.js

import React from "react";
import ReactDOM from "react-dom";
import { Button } from "./Button.js"; // no.js assumes it is a js file
class Random extends React.Component {
  constructor(props) {
    //step1 & 2
    super(props);
    this.state = { color: [0, 250, 0] };
    this.handleClick = this.handleClick.bind(this);
  }

This file has been truncated. show original

styles.css

html, body {
  margin: 0;
  height: 100%;
}

body {
  background-color: #ffffff;
  font-family: Helvetica, Arial, sans-serif;
  text-align: center;
}

This file has been truncated. show original

mirja_t · February 20, 2023, 3:04pm

Because you use an html button rather than your imported Button component in your Random.js component (that would be written with a capital B).

danielfrith95 · February 20, 2023, 4:23pm

Oh yes you’re right! i was looking for ages and not even chatGPT could spot that, thank you!