sort items in state alphabetically

Question

I have a class based React component that is using items in state and rendering result. Here is short snippet how I do this:

class Menu extends Component {
    constructor(props) {
        super(props);
        this.state = {
            items: props.items.edges,
            someItems: props.items.edges,
        }
    }

    render() {
        if (this.state.items.length > 0) {
            return (
                <div className="container">
                    <div className="row">
                        {this.state.someItems.map(({ node }) => {
                            return (
                                <div key={node.id}>
                                    <div>
                                        render some data
                                    </div>
                                </div>

                            )
                        })}
                    </div>
                </div>
            );
        }
    }
}

The data is received as objects inside an array, like this:

My question is would it be possible to sort these items alphabetically before being rendered? What would be the best approach for this?

Yes, you can sort it alphabetically. – Hassan Imam Feb 19 '21 at 06:30 — Hassan Imam, Feb 19 '21 at 06:30

score 1 · Accepted Answer · answered Feb 19 '21 at 07:14

The best approach is to sort the items before you set them to the state. You can use the built in Array.prototype.sort method in order to sort the items. You can use the String.prototype.localeCompare in order to compare strings alphabetically.

I don't know the expected structure of your data so here is a general solution.

class App extends React.Component {
    constructor(props) {
        super(props);

        // Make a copy so as not to modify the original array directly
        const sortedCopy = [...props.items];

        sortedCopy.sort((a, b) => a.name.localeCompare(b.name));

        this.state = {
            items: sortedCopy,
        };
    }

    render() {
        return (
            <div>
                {this.state.items.map((item) => (
                    <p key={item.id}>
                        <div>Item - {item.name}</div>
                    </p>
                ))}
            </div>
        );
    }
}

// Example items prop is out of order
const items = [
    { id: 0, name: "C" },
    { id: 1, name: "B" },
    { id: 2, name: "A" },
    { id: 3, name: "D" },
];

ReactDOM.render(<App items={items} />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Great thank you Abir. That makes sense. My data more nested compared to yours. How would I map over this before sorting it, here is example of what one item in my array would look like: ```const sortedCopy = [this.props.items.edges[0].node.title]``` — Jan Peeter, Feb 22 '21 at 06:19
I found "solution" to above comment, my data is quite nested so still trying to get my head around it. I found another post that explains this. Here is the article for reference: https://stackoverflow.com/questions/38364400/index-inside-map-function — Jan Peeter, Feb 23 '21 at 06:01

sort items in state alphabetically

1 Answers1

Linked