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

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? Thank you kindly!

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

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'));

https://stackoverflow.com/questions/66036779/javascript-and-react-how-to-call-or-reference-a-function February 04, 2021 at 06:39AM