Having Problems with React Components

1

Hi, I’m new to React and I’m trying to learn to use components. Here’s a small project that I’ve been working on. Currently, it’s not working and I can’t figure out why. Here’s my code.

Components.js

import React from "react";
import colorSwap from "./colors.js";
function Title() {
  return <div className="title">Theme Picker JS</div>;
}

class MadeBy extends React.Component {
  constructor(props){
    super(props);
    this.custom1 = document.querySelector(":root").style.getPropertyValue("--custom1");
    this.arry;
  }
  colorCheck(){
    switch (this.custom1) {
    case "#ffffff":
      this.arry = props.info.obj1.colors;
      break;
    case "#868686":
      this.arry = this.props.info.obj2.colors;
      break;
    case "#007799":
      this.arry = this.props.info.obj3.colors;
      break;
    case "#94DF82":
      this.arry = this.props.info.obj4.colors;
      break;
    case "#EEFF06":
      this.arry = this.props.info.obj5.colors;
      break;
    case "#EAEADC":
      this.arry = this.props.info.obj6.colors;
      break;
    default:
      this.arry = this.props.info.obj7.colors;
    }
  }
  render(){
    setInterval(this.colorCheck, 500);
    return (
    <div className="infoDiv">
      <p>
        <p style={{ fontSize: ".9rem", textAlign: "center" }}>
          <h3>
            Made By:
            <a href="https://dev.to/seanolad" target="_blank">
              Sean
            </a>
          </h3>
          Follow him at @Seanolad on DEV and @oj.kb on Instagram.
        </p>
        <section
          style={{
            float: "right",
            width: "10rem",
            fontSize: "1rem",
            textAlign: "right"
          }}
        >
          <p>Here are this theme's colors</p>
          <p>
            The colors: <br />
            #1 {this.arry[0]}, #2 {this.arry[1]}, and #3 {this.arry[2]}
          </p>
        </section>
      </p>
    </div>
  );
  }
}

function MultiColorBoxes() {
  var theme1 = () => {
    colorSwap("#ffffff", "#000000", "#888888");
  };
  var theme2 = () => {
    colorSwap("#868686", "#EC1010", "#ff0000");
  };
  var theme3 = () => {
    colorSwap("#007799", "#C6D5E7", "#1186ED");
  };
  var theme4 = () => {
    colorSwap("#94DF82", "#65ED11", "#3B6447");
  };
  var theme5 = () => {
    colorSwap("#EEFF06", "#000000", "#DEDE81");
  };
  var theme6 = () => {
    colorSwap("#EAEADC", "#E5ECAF", "whitesmoke");
  };
  var theme7 = () => {
    colorSwap("#3F3F3F", "#2A3232", "#1A1A1A");
  };
  return (
    <div className="themes" style={{ textAlign: "center" }}>
      <div className="theme" onClick={theme1}>
        Default Theme
      </div>
      <div className="theme" onClick={theme2}>
        Red Theme
      </div>
      <div className="theme" onClick={theme3}>
        Blue Theme
      </div>
      <div className="theme" onClick={theme4}>
        Green Theme
      </div>
      <div className="theme" onClick={theme5}>
        Yellow Theme
      </div>
      <div className="theme" onClick={theme6}>
        Light Theme
      </div>
      <div className="theme" onClick={theme7}>
        Dark Theme
      </div>
    </div>
  );
}

export { Title };
export { MultiColorBoxes };
export { MadeBy };

Index.js

import React from "react";
import ReactDOM, {render} from "react-dom";
import {Title, MultiColorBoxes, MadeBy} from "./Components.js";
import "./style.css";
class App extends React.Component {
  constructor() {
    this.objects = {
      obj1 : {
        colors: ["#ffffff", "#000000", "#888888"]
      },
      obj2 : {
        colors: ["#868686", "#EC1010", "#ff0000"]
      },
      obj3 : {
        colors: ["#007799", "#C6D5E7", "#1186ED"]
      },
      obj4 : {
        colors: ["#94DF82", "#65ED11", "#3B6447"]
      },
      obj5 : {
        colors: ["#EEFF06", "#000000", "#DEDE81"]
      },
      obj6 : {
        colors: ["#EAEADC", "#E5ECAF", "whitesmoke"]
      },
      obj7 : {
        colors: ["#3F3F3F", "#2A3232", "#1A1A1A"]
      }
    };
  }
  render() {
    return(
      <div style={{display: "flex", alignItems: "center", flexDirection: "column"}}>
        <Title />
        <MultiColorBoxes />
        <MadeBy info={this.objects} />
      </div>
    );
  }
}
render(<App />, document.getElementById("root"));

Colors.js

export default function colorSwap(...colours) {
  let newcolours = [...colours];
  document.querySelector(":root").style.setProperty("--custom1", newcolours[0]);
  document.querySelector(":root").style.setProperty("--custom2", newcolours[1]);
  document.querySelector(":root").style.setProperty("--custom3", newcolours[2]);
}

Here’s the error that I’m getting:

this.props is undefined.

Please help!!!

2

Hello there,

There is an error in this section (relative: Line 4), from what I can see:

colorCheck(){
    switch (this.custom1) {
    case "#ffffff":
      this.arry = props.info.obj1.colors;
      break;

However, I do not see the method being used anywhere… Also, is there a reason you are not using state methods in your components?

Hope this helps

3

Not really familiar with using state, or props to be honest. Just trying to understand them.

4

Ah, well. If you would like to get to know how to use them, a start would be the React course on freeCodeCamp.

Otherwise, as a summary of my understanding:

  • React state is an internal property of a component
  • React props are parameters passed from external components

Hope that helps

5

The colorCheck method is used in a setInterval, I just don’t understand why this error is popping up. What do I change?

6

As I mentioned, you are using React in an unconventional way, and cannot guarantee stability. Also, you have that typo i mentioned.

Lastly, you are potentially not passing the correct reference to the colorCheck method, as you have not bound this to the method. In the constructor, place this:

this.colorCheck = this.colorCheck.bind(this);`

I recommend you go through the above linked tutorials.

7

Thanks, really helpful. At least I understand where to go from here.