How to correctly toggle element in React (if it is in array)

Question

I have CommentSection component right here

    export class CommentSection extends Component {

    <...> some stuff that is not related to question    

    render() {
        if (!this.state.data || !this.state.data.length)
            return null;     
        var comments = [];
        for (let i = 0; i < this.state.data.length; i++) {
            var item = this.state.data[i]; // single comment
            var commentReplies = this.pushReplies(item.id, i);                      
            if (item.replyToId == null) {
                comments.push( // pushing comment if it has replies
                    <React.Fragment key={'b' + i}>
                        <div className="comment">
                            <p className="comments_username">{item.userName}</p>
                            <p className="comments_body">{item.body}</p>
                            <p className="comments_date"> {item.publicationDate}</p>
                            <p className="reply">Reply</p>
                        </div>                        
                        <SmallCommentForm postId={this.state.id} replyToId={item.id} />

                        {commentReplies}

                    </React.Fragment>
                );
            } 

        }

        return (
            <React.Fragment>
                {comments}
            </React.Fragment >
        );
    }
}

I need to toggle <SmallCommentForm> component, but I can't correctly see how I can do it. Should I somehow add/remove display:none attributes from document.getElementById(replyToId) or what?

Almost every solution that I've seen contains if statement which decides should it render code or not. But I can't apply this kind of solution in that case: all comments have only one state, because I am using for () {}

Is there any solutions or am I doing it all wrong? Sorry for my English, it's not my primary language.

Ali · Accepted Answer · 2019-11-07 07:31:34Z

1

I think you can have another attribute for toggling the <SmallCommentForm /> So you have your data in an array in this.state and you have another attribute for the toggle and do { this.state.isOn && <SmallCommentForm />}

edited Nov 7, 2019 at 7:31

answered Nov 6, 2019 at 21:32

Ali

4581 gold badge8 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to correctly toggle element in React (if it is in array)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related