How To Render Reducer By Applying Filter?

My Reducer is: const initialState = { 1: { id: '1', user: 'User1', text: 'User1 Comment', parentId: 0, }, 2: { id: '2', user: 'User2', t

Solution 1:

I think you should render your comments recursively because when you render a comment you have to loop through the comments array to find if there are sub comments under the current comment. Something like that (this code isn't tested, maybe some errors):

renderComments(commentId = 0) {
  return Object.keys(this.props.comments)
    .filter(id => this.props.comments[id].parentId === commentId)
    .map((key, idx) => {
      const comment = this.props.comments[key];
      const style = commendId === 0 ? styles.comment : styles.subComment;
      return (
        <View style={style} key={idx}>
          <Text>
            { comment.id } - { comment.user } - { comment.text} - { comment.parentId }
          </Text>
          {this.renderComments(comment.id)}
        </View>
      );
    });
}

render() {
  return (
    <View>
      {this.renderComments()}
    </View>
  );
}