javascript – Learn how to forestall repeat padding when recursively rendering parts in React Native?

I at the moment have a undertaking in React Native the place I have to render the feedback to a publish. The feedback themselves can have replies that I am recursively rendering.

For the replies, I would like it to be just like Instagram or TikTok’s look the place the mum or dad remark just isn’t indented however the replies are indented by including paddingLeft to them. Nevertheless, in my recursive implementation, the replies to a reply have additional padding added to them on high of the preliminary paddingLeft which resembles Reddit’s system the place a reply to a reply is additional indented. How do I make it in order that the replies to a reply are on the identical indentation stage?

That is what I at the moment have:

const renderCommentItem = ({ merchandise }) => (
        
            
                
                
                    {merchandise.author_username}
                    
                         handleUserPress(merchandise.mentioned_username)}>
                            @{merchandise.mentioned_username ? merchandise.mentioned_username : creation_user}
                        
                        {merchandise.message}
                    
                
            
            
                 {setReplyingTo(merchandise.id); setMSG(`@${merchandise.author_username} `); inputRef.present.focus();}}>
                    Reply
                
                {merchandise.author_username == consumer.username && (
                    
                         confirmDeleteComment(merchandise.id)}>
                            Delete
                        
                    
                )}
            
            {(merchandise.replies.size > 0) && (
                
                     toggleReplies(merchandise.id)} fashion={{alignSelf: 'middle'}}>
                        {showReplies[item.id] ? "Cover Replies" : "View Replies"}
                    
                
            )}
            {showReplies[item.id] && (
                 merchandise.id}
                    renderItem={({ merchandise }) => renderCommentItem({merchandise})}
                />
            )}
        
    );

however the related line is right here:

I am at the moment checking if an merchandise (the reply/remark) has a mum or dad of a mum or dad (which suggests it’s a reply to a reply) and if that’s the case so as to add no padding as I would like each the replies to a mum or dad remark and the replies to a reply to all be on the similar indentation stage.

That is what it appears to be like like proper now:

however I would like the “reply to 2nd reply” remark to be aligned with “reply take a look at” and “2nd reply”.