batch progress visualization In React.js I am slowly digesting React.js, found couple of ways to write the same piece of code:
Please tell where all I went wrong in below code.


I try to put logic inside render(), is that Ok?
Not using React life cycles for simple components?
Use Functional components instead of class components?


File 1: batch_progress.js

Description: Shows batch progress, expects 3 values:


current batch.
target batch count.
state of the batch (based on which the progress bar color changes). 


import React, { Component } from 'react';
import ProgressBar from '../progress_bar/progress_bar';

export default class BatchStatus extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    let color;
    let percentage = (this.props.batch.number / this.props.targetBatchCount) * 100;

    switch (this.props.batch.status) {
      case 100:
        color = '#e7e4f1';
        break;
      case 200:
        color = '#c3dcec';
        break;
      case 300:
        color = '#ecc6eb';
        break;
      case 400:
        color = '#ecdec3';
        break;
      case 500:
        color = '#c8ecc7';
        break;
      default:
        color = '#e7e4f1';
    }

    return (
      &lt;ProgressBar foregroundColor={color} percentage={percentage}&gt;
        {this.props.batch.number}&amp;nbsp;/&amp;nbsp;{this.props.targetBatchCount}
      &lt;/ProgressBar&gt;
    );
  }
}


File 2: progress_bar.js

import React, { Component } from 'react';
import './progress_bar.css';

export default class ProgressBar extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    let foregroundColor = this.props.foregroundColor || '#e7e4f1';
    let percentage = this.props.percentage || 0;
    let backgroundColor = this.props.backgroundColor || '#eceeef';

    let style = {
      backgroundImage:
        'linear-gradient(to right, ' +
        foregroundColor +
        ' ' +
        percentage +
        '%, ' +
        backgroundColor +
        ' 0%)'
    };

    return (
      &lt;div className="progress-bar-container" style={style}&gt;
        {this.props.children}
      &lt;/div&gt;
    );
  }
}
The function render() in only supposed to render. It is not supposed to compute some style, set variables, have any logic other than render: (Functions Names Should Say What They Do). This should respect the SRP (Single Responsiblity Principle), as well as another clean code rule: 'A Function Should Do One Thing'.

What could be code smell in your first file:


A unused constructor should not be there at all,
The percentage calculation should be put in a function of its own
The color choice should be placed in a function of its own


What could be code smell in your second file:


A unused constructor should be removed


For both files, you could also add some prop types verifications using the library 'prop_types'.

As for your questions, with short answers:


Not it's not Ok
Depends on what you intend to do!
This article should help you choose: React Functional or Class components ? - even though you can use hooks now as well :)