React component does not reverse after changing props

Question

I am trying to filter a set of objects in a state whenever a user clicks a button on my component. The filtering logic works fine, but when it returns to the component, there are no filtered objects, and the property is undefined. Is there a lack of a life cycle method?

Click event:

<div onClick={this.filterMyPosts}>My Posts</div> ... <div> {this.renderPosts()} </div> 

filterMyPosts

 filterMyPosts() { this.props.updateFilter("myPosts"); // filtering function uses switch statement based on strings to filter posts } 

Component Container:

 const mapStateToProps = (state) => { return {currentUser: state.session.currentUser, posts: allPostsByFilter(state.posts, state.filter, state.session.currentUser.id, state.bookmarks)} }; const mapDispatchToProps = (dispatch) => ({ updateFilter: (filter) => dispatch(updateFilter(filter)) }) 

Filtering occurs in another file that returns the filtered events in the object. This logic has no errors.

Problem . By the time the next message function is received, it is undefined. Therefore, somewhere along the way, filtered messages do not return a component.

 renderPosts() { return ( <div className ="user-profile-posts"> <ul> {Object.keys(this.props.posts).map(id => <PostIndexItem key={`posts-index-item${id}`} post={this.props.posts[id]} user={true} />)} </ul> </div> ); } 

EDIT function - filter

 export const allPostsByFilter = (filter, currentUserId, posts) => { switch (filter) { case "myPosts": let postKeys = Object.keys(posts).filter( (id) => { return(posts[id].user_id === currentUserId) }); let userPosts = {} postKeys.forEach( (key) => userPosts[key] = posts[key]) let newPosts = {} let postKeys = Object.keys(posts).filter( (id) => { return (Object.keys(userPosts).includes(id)) }); eventKeys.forEach( (key) => newPosts[key] = posts[key]) return newPosts default: return posts 

Answer 1

You lose this context when binding your action.

 <div onClick={this.filterMyPosts}>My Posts</div> 

Change the call to

 <div onClick={() => this.filterMyPosts()}>My Posts</div> 

This guarantees this in your filterMyPosts method. Without it, props are undefined.

Answer 2

There are no posts in the state as one of the properties / gearbox. Events must be replaced by messages.

 const mapStateToProps = (state) => { return {currentUser: state.session.currentUser, events: allPostsByFilter(state.posts, state.filter, state.session.currentUser.id, state.bookmarks)} }; 

There is a parameter mismatch between calling allPostsByFilter and the function definition.

The first parameter should be a filter. Instead, messages are passed as the first parameter.

The submit method - updateFilter should change the state of the filter to start allPostByFilter.