React - Sorting is being done except first element

Question

I was doing React add list and sorting, but the sorting is not working perfectly. it sort well except the first elements. when i add aa, bb, cc elements in order, it should sort as cc, bb,aa, but it actually sort as aa, cc, bb. When i add other elements, it works well except first element 'aa'

problem screenshot

I am working on this for two days but still don't know what's the problem... please help me

My sort function is like this,

handleList = () => {
  const { information } = this.state;
  information.sort((a, b) => (a.name > b.name ? -1 : 1));
  this.setState({
    information: information,
  });
};

My state, and handleCreate function

id = 0;
state = {
  sortingState: false,
  information: [],
};
handleCreate = (data) => {
  const { information } = this.state;
  this.setState({
    information: information.concat({ id: this.id++, ...data }),
  });
};

render

render() {
  const { information } = this.state;
  return (
    <div>
      <Input onCreate={this.handleCreate} />
      <DataList
        data={information}
        onRemove={this.handleRemove}
        onUpdate={this.handleUpdate}
      />
      <button onClick={this.handleList}>Sort</button>
    </div>
  );
}

https://codesandbox.io/s/stoic-yalow-89e28?file=/src/App.js

You should create a minimal reproducible example (preferably on codesandbox) — hgb123
– hgb123, Commented Aug 28, 2020 at 2:30

Liu Lei · Accepted Answer · 2020-08-28 02:51:46Z

1

// try this way
information.sort((a,b)=>
  b.name.trim().localeCompare(a.name.trim())
);

// or this way

information.sort((a, b) => (a.name.trim() > b.name.trim() ? -1 : 1));

edited Aug 28, 2020 at 2:51

answered Aug 28, 2020 at 2:31

Liu Lei

1,2971 gold badge9 silver badges20 bronze badges

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

4 Comments

홍우지 Over a year ago

Would you explain me what's the difference using trim? Does my inputs basically have blanks?

Liu Lei Over a year ago

it's not worked for your first item is because your other item.name has extra space

Liu Lei Over a year ago

Object {name: "aa", phone: "123", date: ""} Object {name: " ff", phone: " 123", date: " "} Object {name: " bb", phone: " 12", date: " "} Object {name: " dd", phone: " 11", date: " "}

Liu Lei Over a year ago

you can see the different of {name:'aa'} with {name: ' bb'} the ' bb' have extra space. that's why your first item not work

EspressoBeans · Accepted Answer · 2020-08-28 03:41:49Z

0

The problem is with your handleSubmit function. Change the initial value of your state fields to "" instead of " ". For example:

    handleSubmit = (e) => {
    e.preventDefault();
    this.props.onCreate(this.state);
    this.setState({
      name: "",
      phone: "",
      date: ""
    });
   };

What your code is doing is adding a space to the beginning of your name string. Then when it sorts, it sorts the items that begin with space after your first item which does not begin with space.

Therefore, this should fix your problem.

answered Aug 28, 2020 at 3:41

EspressoBeans

2,0441 gold badge15 silver badges25 bronze badges

Collectives™ on Stack Overflow

React - Sorting is being done except first element

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related