Reddit style comment chains in React
Test class


In the scope of code you provided, the div is useless and may be omitted:


render() {
  return this.state.comments.map((comment, index) =&gt; (
    &lt;Comment key={index} comment={comment}/&gt;
  ))
}



However, as React warns you in the console, don't forget to pass a key prop to your array items (added in the snippet above).


Comment class


The method name renderSidebar suggest to me that it will return something that React can render, but it returns an object of CSS styles instead. For that reason, I'd rename it to getSidebarStyle.
Since the method renderSidebar doesn't depend on anything except its parameters and doesn't alter any instance variables (it's a pure function), you can move it outside the class.
The array of colors has nothing to do with the logic of selecting a color depending on the intendation level. Depending on your coding style preferences, you could move it to outside the method and capitalize it.
When rendering the subcomments, set a key prop on your array items as above.
JSX is camel-cased and that's why React warns you in the console to change your CSS property names (e.g. border-left to borderLeft), also allowing you to omit the quotes.


Generally, your code is in good shape &amp; all of the comments above are more or less only improvements. To help you move faster, I suggest always checking the console for helpful warnings and using tools such as Prettier and a linter for your JS dialect to help you while programming.