Colourful block digits I have not done Javascript programming in almost a decade. I see that it has changed a lot. Below is code that displays colourful block digits. Any constructive feedback is welcome.



function getRandomColor() {
  const colours = ["#FF6663", "#94FF63", "#63FFEA", "#A763FF", "#F2FF63"];
  return colours[Math.floor(Math.random() * colours.length)];
}

class Square extends React.Component {
  render() {
    var squareStyle = {
      width: 25,
      height: 25,
      backgroundColor: this.props.colour || getRandomColor(),
      display: "inline-block"
    };

    return (
      &lt;div style={squareStyle}&gt;
      &lt;/div&gt;
    );
  }
}

class Digit extends React.Component {
  render() {
    const divStyle = {
      display: "inline-block",
      lineHeight: 0,
      paddingLeft: "10px",
      paddingRight: "10px"
    };

    const filled = [
      [
        [1, 1, 1],
        [1, 0, 1],
        [1, 0, 1],
        [1, 0, 1],
        [1, 1, 1]
      ],
      [
        [0, 0, 1],
        [0, 0, 1],
        [0, 0, 1],
        [0, 0, 1],
        [0, 0, 1]
      ],
      [
        [1, 1, 1],
        [0, 0, 1],
        [1, 1, 1],
        [1, 0, 0],
        [1, 1, 1]
      ],
      [
        [1, 1, 1],
        [0, 0, 1],
        [1, 1, 1],
        [0, 0, 1],
        [1, 1, 1]
      ],
      [
        [1, 0, 1],
        [1, 0, 1],
        [1, 1, 1],
        [0, 0, 1],
        [0, 0, 1]
      ],
      [
        [1, 1, 1],
        [1, 0, 0],
        [1, 1, 1],
        [0, 0, 1],
        [1, 1, 1]
      ],
      [
        [1, 1, 1],
        [1, 0, 0],
        [1, 1, 1],
        [1, 0, 1],
        [1, 1, 1]
      ],
      [
        [1, 1, 1],
        [0, 0, 1],
        [0, 0, 1],
        [0, 0, 1],
        [0, 0, 1]
      ],
      [
        [1, 1, 1],
        [1, 0, 1],
        [1, 1, 1],
        [1, 0, 1],
        [1, 1, 1]
      ],
      [
        [1, 1, 1],
        [1, 0, 1],
        [1, 1, 1],
        [0, 0, 1],
        [1, 1, 1]
      ]
    ];

    let rows = [];

    for (let y = 0; y &lt; 5; y++) {
      for (let x = 0; x &lt; 3; x++) {
        let objKey = y * 5 + x;

        if (filled[this.props.digit][y][x]) {
          rows.push(
            &lt;Square key={objKey} /&gt;
          );
        }
        else {
          rows.push(
            &lt;Square colour="#FFFFFF" key={objKey} /&gt;
          );
        }
      }

      rows.push(
        &lt;br key={y + "-br"} /&gt;
      );
    }

    return (
      &lt;div style={divStyle}&gt;
        {rows}
      &lt;/div&gt;
    );
  }
}

ReactDOM.render(
  &lt;div&gt;
    &lt;Digit digit={0} /&gt;
    &lt;Digit digit={5} /&gt;
    &lt;Digit digit={9} /&gt;
  &lt;/div&gt;,
  document.getElementById("root")
)
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"&gt;&lt;/script&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"&gt;&lt;/script&gt;
&lt;div id="root"&gt;&lt;/div&gt;




To use, add &lt;Digit digit={n}/&gt; (where 0 &lt;= n &lt;= 9). In the future, I plan to change class Digit to class Character (which supports 0-9, A-Z and some punctuation characters). I will change the implementation to something like:

filled = {
    "A": [
        [0, 1, 0],
        [1, 0, 1],
        [1, 1, 1],
        [1, 0, 1],
        [1, 0, 1]
    ]
}


For those curious, this is what the digits 0 to 9 look like:



(the 1 is right-aligned like the 1 on a digital clock face)
squareStyle variable should be initialized in constructor instead of render. Reason being, render is called on each state update and so, if your render is called multiple times, the variable inside render will be computed again which will cause the existing colours of the digits to change on each and will be unpleasant to look.
Usage of var is replaced by let and consts  


Modified Code

class Square extends React.Component {
  constructor(props) {
    super(props)
    this.squareStyle = {
      width: 25,
      height: 25,
      backgroundColor: props.colour || getRandomColor(),
      display: "inline-block"
    };
  }
  render() {
    return (
      &lt;div style={this.squareStyle}&gt;
      &lt;/div&gt;
    );
  }
}