batch progress visualization In React.js
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 :)