Having trouble sorting ul list items alphabetically (ascending/descending) in React.js

Question

I am brand new to React so it is possible that this is a really dumb question, but I could really use some help! I've looked all over and I can't figure out why the sortList function does nothing. Here is the beginning of my component code:

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            items: [
                {
                    id: 1,
                    text: 'bananas',
                    done: false
                },
                {
                    id: 2,
                    text: 'milk',
                    done: false
                },
                {
                    id: 3,
                    text: 'bread',
                    done: false
                },
                {
                    id: 4,
                    text: 'cheese',
                    done: false
                }
            ],
            text: "",
            ascending: true
        };
        this.handleNewText = this.handleNewText.bind(this);
        this.addItem = this.addItem.bind(this);
        this.handleCheckOff = this.handleCheckOff.bind(this);
        this.handleDeleteItem = this.handleDeleteItem.bind(this);
        this.sortList = this.sortList.bind(this);
    }

and the function that won't work...

    sortList() {
        let newList = this.state.items.sort((a,b) => {
            if (this.state.ascending) {
                return a.text - b.text;
            } else {
                return b.text - a.text;
            }
        });
        this.setState({
            ascending: !this.state.ascending,
            items: newList
        });
    }

and the render function...

    render() {
        return (
            <div className="col-lg-6">
                <form>
                    <input type="text" id="textBox" className="form-control" onChange={this.handleNewText} value={this.state.text} />
                    <button id="addButton" className="btn btn-primary" onClick={this.addItem} disabled={!this.state.text}>{"Add Item"}</button>
                </form>
                <div id="postIt">
                    <h1>Shopping List</h1>
                    <List items={this.state.items} onItemCheckedOff={this.handleCheckOff} onDeleteItem={this.handleDeleteItem} />
                    <button id="sortButton" className="btn btn-primary" onClick={this.sortList}>{"Sort"}</button>
                </div>
            </div>
        );
    }   
}

Everything is working great except for the SortList function. I've tried a number of different approaches and can't get it to work. The most that happened was the list items disappeared!

Answer 1

You where trying to subtract 2 strings from each other which returns Nan. Sort wants 1 or -1

let newList = this.state.items.sort((a, b) => {
    if (this.state.ascending && a.text > b.text) {
        return 1;
    } else {
        return -1;
    }
});

hope that answers your question