Javascript and React: How to call or reference a function?

Question

import React from 'react';
import ReactDOM from 'react-dom';

class Car extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      brand: "Ford",
      model: "Mustang",
      color: "red",
      year: 1964
    };
  }
  changeColor = () => {
    this.setState({color: this.getRandomColor()});
  }
  
  clr = function() {
        var hex = Math.floor(Math.random()*256).toString(16);
        return ("0"+String(hex)).substr(-2); // pad with zero
  }
    
  getRandomColor = function() {
    //return "#"+this.clr()+this.clr()+this.clr();  //referenceError: clr is not defined
    //return "#"+clr()+clr()+clr(); // Failed to compile: 'clr' is not defined
    return "#"+{this.clr}+{this.clr}+{this.clr}; // Failed to compile: Unexpected keyword 'this' 
  }

  render() {
    return (
      <div>
        <h1>My {this.state.brand}</h1>
        <p>It is a {this.state.color} {this.state.model} from {this.state.year}. </p>
        <button
          type="button"
          onClick={this.changeColor}
        >Change color</button>
      </div>
    );
  }
}

ReactDOM.render(<Car />, document.getElementById('root'));

I'm learning React from a tutorial, and I'm trying to tweak the function to generate a random color for the car. I've tried to call the clr function, and included my failed efforts for review. How do I correctly call the clr function?

Below is the revision I came up with. I will continue with learning Reactjs!

import React from 'react';
import ReactDOM from 'react-dom';

class Car extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      brand: "Ford",
      model: "Mustang",
      color: "red",
      year: 1964
    };
  }
  changeColor = () => {
    this.setState({color: this.getRandomColor()});
  }
  
  getRandomColor = function() {
        var num = Math.floor(Math.random()*6) + 1;
        switch (num) {
            case 1:
                return ("yellow");
                break;
            case 2:
                return ("purple");
                break;
            case 3:
                return ("orange");
                break;
            case 4:
                return ("blue");
                break;
            case 5:
                return ("black");
                break;
            case 6:
                return ("green");
                break;  
        }
  }  

  render() {
    return (
      <div>
        <h1>My {this.state.brand}</h1>
        <p>It is a {this.state.color} {this.state.model} from {this.state.year}. </p>
        <button
          type="button"
          onClick={this.changeColor}
        >Change color</button>
      </div>
    );
  }
}

ReactDOM.render(<Car />, document.getElementById('root'));

Did you mean return "#" + this.clr() + this.clr() + this.clr(); ? — Jonas Wilms
– Jonas Wilms, Commented Feb 3, 2021 at 22:43
{ ... } in this context is used to build up objects, like { user: "JuniorDev", question: "JavaScript ..." }. The {this.clr} therefore does not quite work. (There are also so called "template literals" which also use curly brackets, but their syntax is also quite different) — Jonas Wilms
– Jonas Wilms, Commented Feb 3, 2021 at 22:45
Jonas, yes.. I did try return "#" + this.clr() + this.clr() + this.clr(); but I got a reference error for that. It is commented out in my post — JuniorDev
– JuniorDev, Commented Feb 3, 2021 at 22:55
For debugging purposes, it would be much easier to separate them into three assignment statements. Then perhaps a forth assignment that is a concatenation of them. I would make it easier on you. — Randy Casburn
– Randy Casburn, Commented Feb 3, 2021 at 23:02
Ok. I changed changeColor = () => to changeColor = function(), and used return "#"+this.clr()+this.clr()+this.clr(); in the getRandomColor function. However, that results in TypeError: Cannot read property 'setState' of undefined. — JuniorDev
– JuniorDev, Commented Feb 3, 2021 at 23:04

Randy Casburn · Accepted Answer · 2021-02-03 23:15:42Z

2

It appears that you have confounded JSX's expression delimiter {} with JavaScript's String literal syntax ${...}.

The fix is quite easy. In your working code,

Change:

return "#"+{this.clr}+{this.clr}+{this.clr};

To:

return `#${this.clr()}${this.clr()}${this.clr()}${this.clr()}`;

Note the use of backticks, the removal of the + and addition of ().

I also included the fourth pair of hex values as I think you'll have better success if you use the full set.

Here is a working StackBlitz

edited Feb 3, 2021 at 23:15

answered Feb 3, 2021 at 23:08

Randy Casburn

14.2k1 gold badge19 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shweta patel · Accepted Answer · 2021-02-03 23:29:20Z

0

  changeColor = () => {
    this.setState({color: this.getRandomColor()});
  }
  clr = function() {
        return Math.floor(Math.random()*256).toString(16);
  }
  getRandomColor = function() {
    return `#${this.clr()}${this.clr()}${this.clr()}`;
  }

  render() {
    return (
      <div>
        <h1>My {this.state.brand}</h1>
        <p>It is a {this.state.color} {this.state.model} from {this.state.year}. </p>
        <button
        style={{color: this.state.color}}
          type="button"
          onClick={this.changeColor}
        >Change color</button>
      </div>
    );
  }

answered Feb 3, 2021 at 23:29

Shweta patel

1651 silver badge11 bronze badges

Collectives™ on Stack Overflow

Javascript and React: How to call or reference a function?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related