React elements not sorting on state update-CodePudding

When updating an array using react state, the value changes but it does not re-sort the react elements that are mapped from it. In this code snippet, the initial state is [1, 3, 2], then mapped to another array, then sorted and displayed like [1, 4, 9]. When I add 2 to the last element of the array, the list value changes to [1, 16, 9] in the list but the sorting does not change. Can someone please explain why it behaves like this?

const TestObject = () => {
  const [state, setState] = React.useState([1, 3, 2]);
  const handleAdd = () => {
    setState([state[0], state[1], state[2]   2]);
  };
  const mappedArray = state.map((x) => x * x);
  mappedArray.sort();
  return (
    <div>
      <p>State: {JSON.stringify(state)}</p>
      <button onClick={handleAdd}>Add</button>
      <h4>Sorted:</h4>
      <ul>
        {mappedArray.map((x, idx) => (
          <li key={idx}>{x}</li>
        ))}
      </ul>
    </div>
  );
};

CodePudding user response：

The default sort mechanism converts the array elements to strings:

const arr = [10, 3, 20, 1]
console.log(arr.sort())

To do a numeric sort change the sort function:

const arr = [10, 3, 20, 1]
console.log(arr.sort((a, b) => a - b))

CodePudding user response：

Your code is trying to change the state reference, which is forbidden, state should only be changed through the setState function. [...state] will create a new array with a different reference in memory, so state will not change.

  const [state, setState] = useState([1, 3, 2]);
  const handleAdd = () => {
    setState([state[0], state[1], state[2]   2]);
  };
  const mappedArray = [...state];
  mappedArray.map(x => x * x).sort();

  return (
    <div>
      <p>State: {JSON.stringify(state)}</p>
      <button onClick={handleAdd}>Add</button>
      <h4>Sorted:</h4>
      <ul>
        {mappedArray.map((x, idx) => (
          <li key={idx}>{x}</li>
        ))}
      </ul>
    </div>
  );

UPDATE

As mentioned in answer by Mrudhula Katta, it is better to pass a compare function sort((a, b) => a - b).This will ensure that code is not sorting array alphabetically.