Sorting Data in React Redux

Question

I am trying to create a sort button and while I have my data(menus) being sorted alphabetically after I added sort menus to the menu case and sort function to mapStateToProps in my main container, my question is what would be the easiest way to implement this button which when clicked will sort the data? Do I need to create a new component for this button or can I do something in my container?

Container:

class DataContainer extends Component {

displayCards = () => {
  switch(this.props.path) {
      case "menus":
          return (this.props.sort_menus.map(card => (
              <NavLink style={{ color: "black" }} to={`/menus/${card.id}`} key={card.id}><MenuCard view={this.props.displayObject} info={card} /></NavLink>
          )));

      default:
          return (<div>Empty</div>)
   }
};

render() {
    return (
       <CardColumns>
          {this.displayCards()}
       </CardColumns>
      )
   }
}

const mapStateToProps = state => {
    return {
        sort_menus: state.menus.cards.sort(function(menu1, menu2) {
          if (menu1.name < menu2.name) {
            return -1;
          }
          if (menu1.name > menu2.name) {
            return 1;
          }
        })
    }
};

Answer 1

It is better to have a memoized selector that will sort the items. check the redux docs https://redux.js.org/recipes/computing-derived-data/