Sorting alphabetically in reactJS

Question

I am trying to sort alphabetically the list of users in my app, adding a button in ReactJS.

The only way I can get this working is passing props, but I know this must not be done because props should not be mutated. Need some help to understand what I am doing wrong. This is my Users component:

import React from "react";
import { Route, Link } from "react-router-dom";
import User from "./User";

class Users extends React.Component {
  state = {
    sort: "asc"
  };

  toggleSort = () => {
    const { users } = this.state;
    this.props.users.sort((a, b) => a.name.localeCompare(b.name));
    this.setState({ users });
  };

  render() {
    const { users } = this.state;

    return (
      <div>
        {this.props.users.map(user => (
          <li key={user.id}>
            <Link to={`/users/${user.id}`}>{user.name}</Link>
          </li>
        ))}
        <button onClick={() => this.toggleSort(users)}>Sort</button>

        <Link to={`/users/new`} />
      </div>
    );
  }
}

export default Users;

This is the only way I can get my sort button to work, but passing the props... Any help? I am pretty new to React

Thanks!

Joshua Obritsch · Accepted Answer · 2019-12-23 13:38:26Z

2

If you don't want to mutate the props then create a new variable:

toggleSort = () => {
  const newUsers = { ...this.props.users };
  newUsers.sort((a, b) => a.name.localeCompare(b.name));
  this.setState({ users: newUsers });
};

and in your render function:

{this.state.users.map(user => (
  <li key={user.id}>
    <Link to={`/users/${user.id}`}>{user.name}</Link>
  </li>
))}

edited Dec 23, 2019 at 13:38

answered Dec 23, 2019 at 13:33

Joshua Obritsch

1,2939 silver badges14 bronze badges

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

Comments

Süleyman GÜNDÜZ · Accepted Answer · 2019-12-23 13:35:34Z

import React from "react";
import { Route, Link } from "react-router-dom";
import User from "./User";

class Users extends React.Component {

  // set users when component mounted.
  componentDidMount () {
    this.setState({
      users: this.props.users
    });
  }

  state = {
    users: [],
    sort: "asc"
  };

  toggleSort = () => {
    const { users } = this.state;
    let newUsers = users.sort((a, b) => a.name.localeCompare(b.name));
    this.setState({ users: newUsers });
  };

  render() {
    const { users } = this.state;

    return (
      <div>
        {users.map(user => (
          <li key={user.id}>
            <Link to={`/users/${user.id}`}>{user.name}</Link>
          </li>
        ))}
        <button onClick={() => this.toggleSort(users)}>Sort</button>

        <Link to={`/users/new`} />
      </div>
    );
  }
}

export default Users;

Collectives™ on Stack Overflow

Sorting alphabetically in reactJS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related