4
\$\begingroup\$

This isn't meant to be a fully-featured anything, isn't meant to involve any sort of api interactions. It's just meant to be a proof-of-concept of how I could implement nested reddit-style comments.

Every comment is either a top level comment or a reply to another comment. Each level of nesting is indented and is color coded. The color-coding wraps back in on itself (eg if there are 5 defined files, then the 6th layer of nesting should have the same color code as the 1st layer of nesting).

import * as React from 'react';

export class Test extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            comments : [
                {
                    'user': 'user1',
                    'text': 'text1',
                    comments: [{
                        'user': 'user3',
                        'text': 'responding to text1',
                        comments: [
                            {
                                'user': 'user1',
                                'text': 'responding to user3'
                            }
                        ]
                    }]
                },
                {
                    'user': 'user2',
                    'text': 'text2'
                }
            ]
        }
    }
    render() {
        return <div>
            {
                this.state.comments.map(comment => (
                    <Comment comment={comment}/>
                ))
            }
        </div>;
    }
}

class Comment extends React.Component {
    renderSidebar(level) {
        const colors = ['green','orange','red'];
        const index = level % colors.length;
        return {'border-left':'solid 3px ' + colors[index]};
    }

    render() {
        const comment = this.props.comment;
        const subComments = comment.comments || [];
        const level = this.props.level || 0;
        return (
            <div className="comment">
                <div className="main-comment" style={this.renderSidebar(level)}>
                    <p className="user" style={{'margin-bottom':'0','opacity':'0.3'}}>{comment.user}</p>
                    <p className="text">{comment.text}</p>
                </div>
                <div className="subcomments" style={{'padding-left':'2em'}}>
                    {subComments.map(comment => (
                        <Comment comment={comment} level={level + 1}/>
                        ))}
                </div>
            </div>
        )
    }
}

jsfiddle here: https://jsfiddle.net/z318wsq6/

\$\endgroup\$
2
\$\begingroup\$

Test class

  1. In the scope of code you provided, the div is useless and may be omitted:
render() {
  return this.state.comments.map((comment, index) => (
    <Comment key={index} comment={comment}/>
  ))
}
  1. 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

  1. 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.
  2. 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.
  3. 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.
  4. When rendering the subcomments, set a key prop on your array items as above.
  5. 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 & 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.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.